25

我正在尝试在 a 中使用 a<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 的回答。

4

6 回答 6

34

这就够了 ：

 form legend{
    float: left;
    width: 100%;
 }
于 2013-12-20T13:47:08.317 回答
9

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

简单地说，跨浏览器不可能将 LEGEND 元素定位在 Fieldset 中。

解决方法：将文本从<legend>a换行<span>，然后重新定位<span>.

于 2010-10-19T23:10:44.383 回答
2

我刚刚<legend>通过给他们一个position: absolute; top: -25px;和父母<fieldset>一个position: relative; padding-top: 30px;

于 2011-04-20T15:30:54.793 回答
0

根据规范，这里是 and 元素的默认fieldset样式legend。通过重置这些属性，您可以使用干净的legend元素。

于 2018-02-19T16:30:47.743 回答
0

根据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;
}
于 2018-11-30T20:27:01.710 回答
0

根据规范，如果是，则图例只是“渲染图例” 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 技巧，以及对规范的引用，表明这不是随机的，而是指定的可靠行为。）

于 2021-04-23T12:59:42.827 回答