Question

我目前正在使用fieldset和legend在一些输入中绘制一个框，其形式看起来像这样：

---------Caption---------
|                       |
|       inputs          |
|                       |
|                       |
-------------------------

我很好奇是否有办法在框底部放置另一个标题（legend），如下所示：

---------Caption1--------
|                       |
|       inputs          |
|                       |
|                       |
--------Caption2---------

只需在字段集底部使用另一个legend标记即可生效....

Answer 1

根据定义，

fieldset和legend的关系为1：1。一个fieldset内部不得包含多个legend元素。您可以使用任何其他元素并使用CSS对其进行样式设置，使其看起来像legend。

Answer 2

根据HTML语法，每个legend只能有一个fieldset个元素，如果您尝试使用两个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>

Answer 3

这是贬低和愚蠢的。不要使用它

这不在顶部和底部，它位于右上角和左上角。它似乎不兼容crossbrowser。

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

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

但是我用它作为带有清除按钮的控制台所以在第二个legend-attribute中我写了 real Legend

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

3 个答案: