调整 HTML 表单中标签元素的行高 [英] Adjusting line-height of label elements in HTML forms

问题描述

我有一个带有包装 <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.

p 和label 标签都属于流内容"标签类别.但是两者之间有一个细微的区别: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) 不能具有 height、line-height、margin 等属性-top、margin-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.

这篇关于调整 HTML 表单中标签元素的行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！