字段集的默认 CSS 值 <legend>

Question

我正在尝试使用

<legend>

作为

<fieldset>

内的标题。

在 IE 以外的浏览器中，

<legend>

位于

<fieldset>

的上边框上，文本完全居中于该行。

我正在尝试重置它的位置，以便它就像任何其他元素一样。即

<h3>

。

这是我迄今为止拥有的CSS。

fieldset legend {
    margin: 0;
    padding: 0;
    position: static;
    border: 0;
    top: auto; left: auto;
    float: none;
    display: block;
    font-size: 14px;
    line-height: 18px;
}

但是图例仍然完美地居中在线。

是的，我可以添加边距/填充/顶部坐标，但我想知道浏览器是否有触发此布局的元素的默认值。然后我想覆盖这些值。

在 Firefox (3.6.10)、Chrome (6.0.472.63)、Safari (5.0.2) 中测试

更新 我将把这个问题再留一周，以防有人能够设置

<legend>

元素的样式。如果没有找到解决方案，我会接受@jnpcl的答案。

Answer 1

这就足够了：

 form legend{
    float: left;
    width: 100%;
 }

Answer 2

https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp

简单来说，不可能跨越 浏览器定位图例 Fieldset 中的元素。

解决方法：将

<legend>

中的文本包裹在

<span>

中，然后重新定位

<span>

。

Answer 3

我刚刚通过给它们一个

<legend>

和给父级

position: absolute; top: -25px;

一个

<fieldset>

 来设计我的 

position: relative; padding-top: 30px;

的样式

Answer 4

这是一个非常老的问题，但在 Google 中仍然很高，所以我想分享一个适合我的解决方案（仅针对更现代的浏览器以获得最佳体验）。

fieldset: {all:unset};
legend:{all:unset};

这对我来说很有效，将所有值取消设置为默认值。从那时起，我就可以愉快地在“干净的床单”上进行造型了。

Answer 5

根据规范，这里是fieldset

和

legend

元素的默认样式

。通过重置这些属性，您可以使用干净的

legend

元素。

Answer 6

根据 HTML - 生活标准，以下样式的工作方式与默认值相同：

fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    border: groove 2px ThreeDFace;
    padding-block-start: 0.35em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    padding-inline-start: 0.75em;
    min-inline-size: min-content;
}

legend {
    padding-inline-start: 2px; padding-inline-end: 2px;
}

Answer 7

根据规范，如果图例是

float: none

，则它只是“渲染图例”。

这意味着通过这样做：

<fieldset>
    <legend style='float: left'> Heading </legend>
    <div class='clearfix'></div>
    <!-- Your form elements here -->
</fieldset>

这使得图例的行为类似于普通（如果浮动）元素。

注：

clearfix

是Bootstrap的clearfix类：

.clearfix::after {
    clear: both;
}
.clearfix::before, .clearfix::after {
    display: table;
    content: " ";
}

（已经发布了类似的答案，但这不包括clearfix技巧，以及对规范的引用，表明这不是随机的，而是可靠的指定行为。）

Answer 8

我无法在 Safari 17.5 中使用

float: left; width: 100%;

解决此问题。

但我尝试了其他方法来解决我的问题：

<fieldset>
    <legend>
        <span>Text</span>
    </legend>
</fieldset>

legend {
    display: contents;
}

这完全消除了 Safari 中渲染的

legend

，但仍然为字段集的屏幕阅读器保留了 A11y 功能。