带有两个图例的 HTML 字段集 - 顶部和底部

Posted 2023-02-16

【中文标题】带有两个图例的 HTML 字段集 - 顶部和底部

【英文标题】：HTML fieldset with two legends - top and bottom

【发布时间】：2013-11-27 22:54:25

【问题描述】：

我目前正在使用fieldset 和legend 在我拥有的一些输入周围绘制一个框，其形式如下所示：

- - - - -标题 - - - - - | | |输入 | | | | | -------------------------

我很好奇是否有办法在框的底部添加另一个标题 (legend)，如下所示：

---------标题1-------- | | |输入 | | | | | --------标题2---------

仅在字段集底部使用另一个legend 标记不起作用....

【参考方案1】：

这不是在顶部和底部，而是在右上角和左上角。它似乎不兼容跨浏览器。

我将此代码用于我的网页：

<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

【参考方案2】：

根据 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>

【参考方案3】：

fieldset 和 legend 根据定义具有 1:1 的关系。一个fieldset 内部不能有多个legend元素。您可以使用任何其他元素并使用 CSS 对其进行样式设置，使其看起来像 legend。

【讨论】：

所以为了实现这一点，我必须使用 css 将我的文本定位在底部的边框上，并给它一个与内容背景相同的背景，这样你就不会看到边框穿过文本？它肯定是可行的，但似乎应该有一个更简单/更优雅的解决方案......

好吧，我不认为这是一个很常见的情况，所以我并不惊讶它涉及一些 CSS：毕竟它不应该超过 10 行左右......

我试图获得相同的、非常有用的答案，但您会认为在某些时候会有一种在字段集上设置多个图例的方法