Question

我正在尝试使用<legend>作为<fieldset>内的标题。

在IE以外的浏览器中，<legend>位于<fieldset>的顶部边框，文字完美地位于该行的中心。

alt text

我正在尝试重置它的位置，以便它就像任何其他元素一样。即<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

简单地说，它是不可能的浏览器定位LEGEND 字段集中的元素。

解决方法：将<legend>中的文字换成<span>，然后重新定位<span>。

Answer 3

我刚刚为<legend>设置了position: absolute; top: -25px;，而<fieldset>的父position: relative; padding-top: 30px;设为{{1}}

Answer 4

根据规范，fieldset和legend元素的here is the default styling。通过重置这些属性，您可以使用干净的legend元素。

Answer 5

根据HTML - Living Standard，以下样式的工作方式类似于默认样式：

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 6

根据specification，如果它是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 技巧，以及对规范的引用，该规范表明这不是随机的，而是可靠的指定行为。）

字段集<legend> </legend>的默认CSS值

6 个答案: