1

我目前正在使用fieldsetandlegend在一些输入周围绘制一个框，其形式如下所示：

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

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

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

简单地在字段集底部使用另一个legend标签是行不通的......

4

3 回答 3

8

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

于 2013-11-14T18:56:10.780 回答
3

根据 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>
于 2013-11-14T19:26:26.037 回答
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>

但是我将它用作带有清除按钮的控制台
所以在第二个图例属性中我写了真正的图例

于 2015-01-14T16:23:30.410 回答