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

Posted 2023-02-16

【中文标题】如何将图例定位在带边框的字段集中？ [复制]

【英文标题】：How to position the legend inside a fieldset with a border? [duplicate]

【发布时间】：2011-06-19 03:26:59

【问题描述】：

根据网络上的几个参考资料，无法定位图例。所以建议用span包裹起来：

<legend><span>Foo</span></legend>

然后我们可以将跨度定位在字段集中。但是当我想在字段集的顶部添加边框时，图例有一个间隙。幸运的是，我发现在图例中添加边框也可以解决这个小小的差距，但这是一个丑陋的解决方案（就像所有其他的 css 一样）。对于这个问题，您有更有效的解决方案吗？

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

【问题讨论】：

让我看看我是否做对了；您想知道如何将图例标签从其原始位置移开，然后关闭顶部边框的间隙？如果是，那为什么还要使用字段集图例标签集？

你会这样做是为了语义和可访问性。元素的视觉样式与机器（例如屏幕阅读器）如何处理它几乎没有关系。

奇怪的是无法更改，因为我认为浏览器中的所有默认样式都是通过用户代理样式表设置的。

将此标记为this question 的副本，这样以后的人就不必筛选所有这些答案了。

【参考方案1】：

我认为这会奏效

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

给图例标签加边框

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

【讨论】：

@Craig Wayne 因为这个答案不能解决问题？

【参考方案2】：

为定位设置边距。它可以正常工作。

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

【讨论】：

设置边距顶部效果不佳，因为图例仍然相对于字段集偏移。它的对齐方式随着图例高度的变化而变化

【参考方案3】：

使用轮廓代替边框：http://jsfiddle.net/leaverou/gtNnT/

【讨论】：

如果您不关心 IE 5/6/7 用户（仍然有很多人），Outline 很有用。 IE 8 和 Firefox 支持（所有当前版本）也参差不齐。如果只有浏览器支持更好，这将是最好的选择（只要您不尝试做任何像圆角这样的边框效果）！ reference.sitepoint.com/css/outline

我很高兴地报告说，在 2013 年，IE5/6/7 用户不再是一大群人。我想了想，这让我非常高兴:)

当字段集有彩色背景时，这并不能解决问题

哈！你在会议上做过演讲b4 你还没有？

【参考方案4】：

我知道这是一个老问题，但是当我用谷歌搜索“字段集图例位置”时，我得到了这个页面，我真的找不到一个好的答案。

图例无法正常运行！所以我找到的最佳解决方案是将其绝对定位并在字段集上设置一个填充顶部。 JS文件示例：http://jsfiddle.net/carlosmartinezt/gtNnT/356/

fieldset 
    position:relative;
    padding-top:50px;


legend 
    position:absolute;
    top:20px;
    left:18px;
​

【讨论】：

感谢您的评论。直到看到/尝试这个，我才知道相对和绝对如何协同工作。

@Veiko 的浮点数应该被使用。这是一种不好的做法，因为它会失败：jsfiddle.net/g18Lwnf7

【参考方案5】：

OP 几乎回答了他自己的问题：包装可以解决问题，但情况恰恰相反。使用：

<span><legend>Foo</legend></span>

【讨论】：

这是无效的 html（至少从 html5 开始）。

【参考方案6】：

发现这是最一致的，在 IE7、Firefox 和 Chrome 中测试过

fieldset legend text-align:left;

【讨论】：

什么是无用的答案。

这没有回答问题，主要是关于垂直定位，而不是文本对齐。

【参考方案7】：

我最终只使用了 div 元素。最后，我只需要边框和边框上的文字，就是这样。

【参考方案8】：

您可以使用 margin-bottom "-50px" 作为图例，使用 padding-top "50px" 作为字段集，因此不要重叠。

fieldset  
padding-top:50px;


fieldset legend  
margin-bottom:-50px;

【参考方案9】：

我发现LEGEND 的简单float:left 就可以完成这项工作。

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

【讨论】：

是的，我从 google 登陆了这个页面，很惊讶float:left 在页面下方这么远，而这显然是最简单的答案。

这是最好的解决方案。感觉比使用绝对定位或任何附加元素要好得多。

是的，比绝对定位好。图例可能有自己的高度。

在 Chrome 55 中不起作用 :(

不错的收获。比必须手动考虑其不寻常的隐含高度要好得多

【参考方案10】：

这对我来说似乎更直接。

fieldset legend  
    position:relative;
    left:20px;

【讨论】：

请在您的回答中添加一些解释，说明这是如何解决问题的