样式图例标记为块

我在以下网址设置了我的问题演示:http://jsfiddle.net/YHHg7/4/ 我正在尝试执行以下操作:
legend {
  display: block;
  border-bottom: 1px solid red;
  margin-bottom: 50px;
}
但是,似乎所有浏览器都忽略了图例标记上的
display: block
。这是这个标签的正确行为还是我做错了什么?     
已邀请:
<legend>
默认是一个块级元素,所以无论你是否包含
display: block
都没有区别。但是,它被浏览器特别与
<fieldset>
一起作为字段集的标签处理。 要将它从“deta4”“分离”,你可以给它一个非静态的位置,或者漂浮它,或者甚至只是用它的边缘玩一点。然而,结果可能有点不可预测,这也是由于两种元素的特殊处理。     
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;
}
清晰,语义,并且通常可以在不同的浏览器中轻松操作     
默认情况下,
legend
是块级元素。如果我使用Chrome(开发频道)添加宽度,则图例的宽度会相应更改。 如果你反而想知道
margin
风格,
legend
只能设置它的左边距或右边距,这将使它相对于其所包含的
fieldset
。如果你想为其他元素添加间距,那么你会可能想要添加填充到
fieldset
本身。     
如果您希望红线一直延伸,请取消注释
width
属性。
legend {
  display: block;
  border-bottom: 1px solid red;
  width:100%;
  margin-bottom: 50px;
}
    

要回复问题请先登录注册