代码之家 › 专栏 › 技术社区 › Marko

字段集的默认CSS值<legend>

fieldset legend css html

19

Marko · 技术社区 · 15 年前

我想用一个 <legend> <fieldset> .

在IE以外的浏览器中 < 位于 <字段集> ,文本完全居中。

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;
}

传奇仍然完全集中在直线上。

是的,我可以添加margin/padding/top坐标,但我想知道浏览器是否有触发此布局的元素的默认值。然后,我想重写这些值。

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

更新我将把这个问题留待一周,以防有人能够 <图例> 元素。如果没有找到解决方案,我将接受@jnpcl的答案。

5 回复 | 直到 15 年前

1

8

ax. Clement Herreman 9 年前

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

简单地说,这是不可能跨越定位图例的浏览器字段集中的元素。

解决方法:将文本从 <legend> 在一个 <span> ,然后重新定位 <跨度>

2

27

Neoweiter 11 年前

这就足够了:

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

3

2

BWLR 14 年前

我刚刚设计了 <legend> 就是给他们一个 position: absolute; top: -25px; <fieldset> 用一个 position: relative; padding-top: 30px;

4

0

Fla 7 年前

根据说明书, here is the default styling 的 fieldset 和 legend 元素。通过重置这些属性,您可以要使用的元素。

5

0

Reza Mamun 6 年前

根据 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;
}