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 回答