如何在带边框的字段集中定位图例？ [重复]

This question already has an answer here:

这个问题在这里已有答案：

Prevent the fieldset element's border from going through the legend element 2 answers
防止fieldset元素的边框通过图例元素2的答案

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?

然后我们可以将span放在fieldset中。但是当我想在字段集的顶部添加边框时，传说中有一个间隙。幸运的是，我发现在图例中添加边框也可以修复这个微小的差距，但这是一个丑陋的解决方案（就像其他所有css一样）。你有没有更有效的解决方案来解决这个问题？

note: I've found the solution concurrently, after I've started writing this question, so I want to still ask it.

注意：在我开始写这个问题之后，我同时找到了解决方案，所以我还想问它。

10 个解决方案

#1

-14

I think this will work

我认为这会奏效

 <legend><span>ur text</span></legend>

Give border to the legend tag

为图例标记添加边框

legend {padding: 2px;border: 1px solid green;}

#2

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.

我知道这是一个老问题，但是当我搜索“fieldset legend position”时我得到了这个页面，我真的找不到一个好的答案。

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

#3

I found that simple float:left for LEGEND will do the job.

我发现简单的浮动：左边的LEGEND将完成这项工作。

Codepen sample: http://codepen.io/vkjgr/pen/oFdBa

Codepen示例：http：//codepen.io/vkjgr/pen/oFdBa

#4

Use an outline instead of a border: http://jsfiddle.net/leaverou/gtNnT/

使用轮廓而不是边框：http：//jsfiddle.net/leaverou/gtNnT/

#5

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>

#6

Set margins for positioning. It works without problems.

设置定位边距。它没有问题。

legend {margin-left:50px;} /* 50px from Left of the Fieldset */

#7

You can use margin-bottom "-50px" for legend and padding-top "50px" for fieldset so do not overlap.

对于图例集，您可以使用margin-bottom“-50px”，对于fieldset，可以使用padding-top“50px”，因此不要重叠。

fieldset { 
padding-top:50px;
}

fieldset legend { 
margin-bottom:-50px;
}

#8

-2

This seems more straight forward to me.

这对我来说似乎更直接。

fieldset legend { 
    position:relative;
    left:20px;
}

#9

-3

Found this the most consistent, tested in IE7, Firefox and Chrome

发现这是最稳定的，在IE7，Firefox和Chrome中经过测试

fieldset legend { text-align:left; }

fieldset legend {text-align：left; }

#10

-3

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元素。最后，我只需要边框和边框上的文字，就是这样。

#1

-14