CSS 如何在带边框的字段集中放置图例？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4860708/
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
How to position the legend inside a fieldset with a border?
提问by nocss guy
According to the several references on the web, it is not possible to position a legend. So it is suggested to wrap it with span:
根据网络上的几个参考资料，无法定位图例。所以建议用span包裹：
<legend><span>Foo</span></legend>
Then we can position the span inside the fieldset. but then when I want to add a border on top of the fieldset, there is a gap for the legend. Luckily, I've found that adding border to the legend also fixes this little, tiny gap but that's ugly solution (as everything else with css). Do you have any more valid solutions to this problem?
然后我们可以在字段集内定位跨度。但是当我想在字段集的顶部添加边框时，图例存在间隙。幸运的是，我发现为图例添加边框也修复了这个微小的差距，但这是一个丑陋的解决方案（与 css 的其他所有内容一样）。您对这个问题有更有效的解决方案吗？
note: I've found the solution concurrently, after I've started writing this question, so I want to still ask it.
注意：在我开始写这个问题之后，我同时找到了解决方案，所以我仍然想问它。
采纳答案by Best website designer
I think this will work
我认为这会奏效
<legend><span>ur text</span></legend>
Give border to the legend tag
为图例标签添加边框
legend {padding: 2px;border: 1px solid green;}
回答by Veiko J??ger
I found that simple float:leftfor LEGENDwill do the job.
我发现这很简单float:left，LEGEND可以完成这项工作。
Codepen sample: http://codepen.io/vkjgr/pen/oFdBa
Codepen 示例：http://codepen.io/vkjgr/pen/oFdBa
回答by Carlos Martinez T
I know this is an old question, but I got this page when I googled "fieldset legend position", and I really couldn't find a good answer.
我知道这是一个老问题，但是当我搜索“字段集图例位置”时我得到了这个页面，我真的找不到一个好的答案。
The legend just won't behave!, so the best solution I found was to position it absolute and have a padding top on the fieldset. JSFildle example: http://jsfiddle.net/carlosmartinezt/gtNnT/356/
图例不会表现！，所以我找到的最佳解决方案是将其绝对定位并在字段集上有一个填充顶部。JSFildle 示例：http: //jsfiddle.net/carlosmartinezt/gtNnT/356/
fieldset {
position:relative;
padding-top:50px;
}
legend {
position:absolute;
top:20px;
left:18px;
}?
回答by Lea Verou
Use an outline instead of a border: http://jsfiddle.net/leaverou/gtNnT/
使用轮廓而不是边框：http: //jsfiddle.net/leaverou/gtNnT/
回答by Marthein
The OP almost answered his own question: wrapping does the trick, but it's the other way around. Use:
OP 几乎回答了他自己的问题：包装可以解决问题，但恰恰相反。用：
<span><legend>Foo</legend></span>
回答by Chugworth
Set margins for positioning. It works without problems.
设置定位边距。它可以毫无问题地工作。
legend {margin-left:50px;} /* 50px from Left of the Fieldset */
回答by user3515900
You can use margin-bottom "-50px" for legend and padding-top "50px" for fieldset so do not overlap.
您可以将 margin-bottom "-50px" 用于图例，将 padding-top "50px" 用于字段集，因此不要重叠。
fieldset {
padding-top:50px;
}
fieldset legend {
margin-bottom:-50px;
}
回答by user1286322
This seems more straight forward to me.
这对我来说似乎更直接。
fieldset legend {
position:relative;
left:20px;
}
回答by user1106135
Found this the most consistent, tested in IE7, Firefox and Chrome
发现这是最一致的，在 IE7、Firefox 和 Chrome 中测试过
fieldset legend
{
text-align:left;
}
fieldset legend
{
text-align:left;
}
回答by Ph??ng Nguy?n
I ended up using just div elements. In the end, I just need the border and the text over the border, that's it.
我最终只使用了 div 元素。最后，我只需要边框和边框上的文本，就是这样。
