可以将任何HTML元素设置为字段集/图例吗？
[英]Can any HTML element be styled as a fieldset/legend?
问题描述
Using the display property, HTML elements become interchangeable from a styling perspective. 
使用display属性，HTML元素从样式角度可以互换。 This doesn't seem to be the case for fieldset and legend , however. 但是，对于fieldset和legend ，情况似乎并非如此。
Is it possible to style other HTML elements to look like fieldset and legend ? 是否可以将其他HTML元素设置为看起来像fieldset和legend ？
4 个解决方案
解决方案1
3 已采纳 2010-07-17 10:35:32
The previous answer is incorrect, if you want to see why try this: 以前的答案是不正确的，如果你想看看为什么试试这个：
<body style="background-color: #f00">
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
</body>
AFAIK there is no way to have that border-disruption effect that the legend element causes on the fieldset 's border. AFAIK没有办法让legend元素在fieldset的边框上产生边界中断效果。 I don't believe that is possible with CSS alone, it's just something that is part of the way the fieldset tag is rendered. 我不相信单独使用CSS是可能的，它只是fieldset标记呈现方式的一部分。
Clarification : I don't know of any way to position a block or inline element such that it straddles the visible border of its containing block element, and then causes the container element's border to be broken behind its box. 澄清 ：我不知道如何定位块或内联元素使其跨越其包含块元素的可见边界，然后导致容器元素的边框在其框后面被破坏。 That's what a <legend> does to the border on its containing <fieldset> element. 这就是<legend>对其包含的<fieldset>元素的边框所做的。
解决方案2
3 2010-07-18 03:26:17
This works pretty good, but ie6 will act a bit strange if the background is an image, nothing a conditional comment couldn't fix. 这工作得很好，但是如果背景是图像，ie6会有点奇怪，没有任何条件注释无法修复。 Tested in IE6-8, FF3.6, Safari 5, Chrome 5 在IE6-8，FF3.6，Safari 5，Chrome 5中测试过
.fieldset {
position: relative;
border: 1px solid #000;
margin: 20px;
padding: 20px;
text-align: left;
}
.fieldset .legend {
background: #fff;
height: 1px;
position: absolute;
top: -1px;
padding: 0 20px;
color: #000;
overflow: visible;
}
.fieldset .legend span {
top: -0.5em;
position: relative;
vertical-align: middle;
display: inline-block;
overflow: visible;
}
<div class="fieldset">
<div class="legend">
<span>This is the title</span>
</div>
Test
</div>
解决方案3
2 2010-07-17 10:20:20
Sure, for example: a DIV element with a border and a child heading element with the background color set positioned to overlap the DIV's border would look just like a fieldset and legend. 当然，例如：带有边框和子标题元素的DIV元素，背景颜色集定位为与DIV边框重叠，看起来就像字段集和图例。
Very basic example: 非常基本的例子：
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
解决方案4
0 2015-06-12 21:14:30
So I fixed the code so that it looks somewhat (It really look like the legend tag) like the legend tag. 所以我修改了代码，使其看起来有些像传奇标签一样（它看起来像传奇标签）。
<div style="border: 2px groove #ccc">
<h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.