【发布时间】：2013-11-27 22:54:25
【问题描述】：
我目前正在使用fieldset 和legend 在我拥有的一些输入周围绘制一个框，其形式如下所示：
我很好奇是否有办法在框的底部添加另一个标题 (legend)，如下所示：
仅在字段集底部使用另一个legend 标记不起作用....
【问题讨论】：
【发布时间】：2013-11-27 22:54:25
【问题描述】：
这不是在顶部和底部，而是在右上角和左上角。它似乎不兼容跨浏览器。
我将此代码用于我的网页：
<style>
fieldset { margin:0; }
legend:after { position:absolute;content: attr(secondlegend);left:20px;background: #fff; }
</style>
<fieldset><legend secondlegend="Console" align="right"><button>clear</button></legend>
This is the content<br>of this fieldset
</fieldset>
但我将它用作带有清除按钮的控制台
所以在第二个传奇属性中我写了 real Legend
【讨论】：
根据 HTML 语法，每个 fieldset 只能有一个 legend 元素，如果您尝试使用两个 legend 元素，则只有第一个元素显示为图例。第二个被视为正常内容。
使用 CSS 设置底部图例的样式并不像听起来那么简单，部分原因是 IE 为 fieldset 应用填充不同于其他浏览器（和 HTML5 CR）。但以下似乎在支持 CSS 的浏览器上给出了相当一致的结果：
<style>
fieldset { position: relative; padding: 0.35em 0.625em 0.75em; }
.legend2 { position: absolute; bottom: -1.4ex; left: 10px; background: white }
caption, .legend2 { padding: 0 2px }
</style>
<fieldset><legend>Caption <span class=legend2>Caption2</span></legend>
Put fields here.
</fieldset>
【讨论】：
fieldset 和 legend 根据定义具有 1:1 的关系。一个fieldset 内部不能有多个legend元素。您可以使用任何其他元素并使用 CSS 对其进行样式设置，使其看起来像 legend。
【讨论】：
-
所以为了实现这一点，我必须使用 css 将我的文本定位在底部的边框上，并给它一个与内容背景相同的背景，这样你就不会看到边框穿过文本？它肯定是可行的，但似乎应该有一个更简单/更优雅的解决方案......
-
好吧，我不认为这是一个很常见的情况，所以我并不惊讶它涉及一些 CSS：毕竟它不应该超过 10 行左右......
-
我试图获得相同的、非常有用的答案，但您会认为在某些时候会有一种在字段集上设置多个图例的方法