样式图例标记为块 [英] Style legend tag as block

问题描述

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

I've setup a demo of my problem at the following url: http://jsfiddle.net/YHHg7/4/

我尝试执行以下操作：

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

但是似乎所有浏览器都忽略 display：block 。这是这个标记的正确行为，或者我做错了什么？

However it seems all browsers ignore the display: block on a legend tag. Is this the correct behaviour for this tag or am I doing something wrong?

推荐答案

< legend> 是一个块级别的元素，默认情况下，所以无论你是否包括 display：block 没有区别。但是，它与浏览器< fieldset> 特别一起作为字段集的标签。

<legend> is a block-level element by default, so whether you include display: block there's no difference. However, it's treated specially together with <fieldset> by browsers as a label for a fieldset.

分离它从< fieldset> 你可以给它一个非静态位置，或浮动，或者甚至只是玩一些更多的边距。结果可能有点不可预测，但由于两个元素的特殊处理。

To "detach" it from the <fieldset> you can give it a non-static position, or float it, or even just play a little more with its margins. Results can be a little unpredictable, though, again due to the special treatment of both elements.

这篇关于样式图例标记为块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！