调整 HTML 表单中标签元素的行高

2022-01-25 00:00:00 label forms html css

我有一个带有包装 <label> 元素的表单,但是 <label> 的两行之间的空间太大,我不能't 似乎调整了 <label> 的行高.

I have a form with a wrapping <label> element, but the space between the <label>'s two lines is too big and I can't seem to adjust the line-height of the <label>.

这是 <label><p> 的示例,两者都应用了相同的 CSS.如您所见,<p> 调整正确,而 <label> 保持不变.

Here is an example of a <label> and a <p>, both with the same CSS applied. As you can see, the <p> adjusts correctly, while the <label> remains unchanged.

http://jsfiddle.net/QYzPa/

代码:

form label,
form p
{    
  font-weight:bold;
  line-height:.7em;
}

<form style="width:200px;">
    <fieldset>
         <label for="textarea">In ten or fewer words, explain American history</label>
        <p>In ten or fewer words, explain American history</p>
        <textarea name="textarea" rows="5" ></textarea>
    </fieldset>
</form>

推荐答案

所有的 HTML 标签都按照描述其性质的类别进行分类.这种分类可以涉及语义、行为、交互等诸多方面.

All the HTML tags are classified in categories that describe their nature. This classification can be related to semantics, behavior, interaction and many other aspects.

plabel 标签都属于流内容"标签类别.但是两者之间有一个细微的区别:label 标签也被归类为短语内容"类别.

Both p and label tags are classified in "flow content" tags category. But there is one slight difference between then: the label tag is also classified in a category called "phrasing content".

这一切在实践中意味着什么?浏览器默认渲染将遵循指定的标签分类,并将 p 标签视为块元素,而 label 标签将默认视为 in-线元素.您可以通过覆盖默认 CSS 规则来修改它:只需告诉浏览器您希望您的 label 像块元素一样呈现.

What do all this mean in practice? The browser default rendering will follow the specified tag classifications and will treat the p tag as a block element, while the label tag will, by default, be treated as an in-line element. You can modify this by overwriting the default CSS rule: just tell the browser that you want your label to be rendered like a block element.

label {
  display: block;
}

您需要这样做,因为内联元素 (display:inline) 不能具有 heightline-heightmargin 等属性-topmargin-bottom(它们将被忽略).

You need to do that because elements that are in-line (display:inline) can't have properties like height, line-height, margin-top, margin-bottom (they will be ignored).

如果您希望内联元素具有高度属性但仍保持其内联行为(不会导致 LINE BREAK),您可以将其声明为:

If you want an inline element to have a height property but still keep it with it's inline behavior (without cause a LINE BREAK), you can declare it as:

label{
 display:inline-block;
}

阅读 HTML 的文档总是好的.这是一个显示类别的漂亮图表,它可以为您节省大量时间,尤其是在处理这些小问题时.

It's always good to take a read at HTML 's documentation. Here is a nice graph showing the categories, it can save you a lot of time, specially when dealing with these small quirks.

相关文章