样式图例标记为块

Question

我已在以下网址设置了我的问题演示：http://jsfiddle.net/YHHg7/4/

我正在尝试执行以下操作：

legend {
  display: block;
  border-bottom: 1px solid red;
  margin-bottom: 50px;
}

然而，似乎所有浏览器都忽略了图例标记上的display: block。这是这个标签的正确行为还是我做错了什么？

Answer 1

默认情况下，

<legend>是块级元素，因此，无论您是否包含display: block，都没有区别。但是，它被浏览器与<fieldset>一起特别对待，作为字段集的标签。

要将它从<fieldset>“分离”，你可以给它一个非静态的位置，或者漂浮它，或者甚至只是用它的边缘玩一点。然而，结果可能有点不可预测，这也是由于两种元素的特殊处理。

Answer 2

IMO你可以做的最好的事情就是控制传奇只是把它作为一个语义夹具。

CSS：

legend {
    display: block;
    margin: 0;
    border: 0;
    padding: 0;
    width: 100%;
}

然后在其中使用span来控制所有想要的样式：

HTML：

<legend><span>Span to the rescue!</span></legend>

CSS：

legend span {
    display: block;
    padding: 0 20px;
    border-bottom: 1px solid red;
}

清洁，语义，并且通常可以在不同的浏览器中轻松操作

Answer 3

如果您希望红线一直延伸，请取消注释width属性。

legend {
  display: block;
  border-bottom: 1px solid red;
  width:100%;
  margin-bottom: 50px;
}

Answer 4

默认情况下，legend是块级元素。如果我使用Chrome（开发频道）添加宽度，则图例的宽度会相应更改。

如果您想要了解margin样式，legend只能设置其左边距或右边距，并且会将其相对于其中包含的fieldset如果要为其他元素添加间距，则可能需要向fieldset本身添加填充。