Html 字段集 <legend> 的默认 CSS 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3973456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Default CSS values for a fieldset <legend>
提问by Marko
I'm trying to use a <legend>as a title inside a <fieldset>.
我正在尝试将 a<legend>用作 a 中的标题<fieldset>。
In browsers other than IE, the <legend>is positioned on the top border of the <fieldset>, with the text perfectly centered on the line.
在 IE 以外的浏览器中，<legend>位于 的顶部边框上<fieldset>，文本完全居中于行上。
I'm trying to reset it's position so that it sits just like any other element. i.e. an <h3>.
我正在尝试重置它的位置，使其与任何其他元素一样。即一个<h3>。
Here's the CSS I have so far.
这是我到目前为止的 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;
}
But the legendis still perfectly centered on the line.
但图例仍然完美地以线为中心。
Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values.
是的，我可以添加边距/填充/顶部坐标，但我想知道浏览器是否有触发此布局的元素的任何默认值。然后我想覆盖这些值。
Tested in Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)
在 Firefox (3.6.10)、Chrome (6.0.472.63)、Safari (5.0.2) 中测试
UpdateI'll leave this question open for another week just in case someone HAS been able to style <legend>elements. If no solutions are found I'll accept @jnpcl's answer.
更新我将这个问题再开放一周，以防万一有人能够设计<legend>元素。如果找不到解决方案，我将接受@jnpcl 的回答。
采纳答案by drudge
Simply put, it is not possible across browsers to position the LEGEND element in a Fieldset.
简而言之，不可能跨浏览器在 Fieldset 中定位 LEGEND 元素。
Workaround: wrap the text from <legend>in a <span>, then reposition the <span>.
解决方法：将 中的文本包裹在<legend>中<span>，然后重新定位<span>.
回答by Neoweiter
This is enough :
这就够了 ：
form legend{
float: left;
width: 100%;
}
回答by BWLR
I've just styled my <legend>'s by giving them a position: absolute; top: -25px;and the the parent <fieldset>with a position: relative; padding-top: 30px;
我刚刚<legend>通过给他们一个position: absolute; top: -25px;和父母<fieldset>一个position: relative; padding-top: 30px;
回答by Fla
According to the specification, here is the default stylingof the fieldsetand legendelements. By resetting those properties, you can have a clean legendelement to work with.
根据该规范，这里是默认样式的fieldset和legend元素。通过重置这些属性，您可以使用干净的legend元素。
回答by Reza Mamun
As per HTML - Living Standard, the below styles are working like a default:
根据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;
}
