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

问题描述

我有一个包含< label> 元素的表单，但是< label> 两行太大，我似乎无法调整< 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.

HTML ：

<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>

CSS：

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

推荐答案

在描述他们的性质的类别。这种分类可以与语义，行为，交互和许多其他方面相关。

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 标签分类在流量内容标签类别中。但是之间有一个细微的差别：标签标签也被归类在称为短语内容的类别中。

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 标记视为块元素，而标签默认情况下，标签将被视为内联元素。您可以通过覆盖默认的CSS规则来修改它：只需告诉浏览器您希望标签呈现为块元素。

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;
}

您需要这样做，因为元素在线）不能具有 height ， line-height ， margin-top ， margin-bottom （将被忽略）。

有一个height属性，但仍然保持它的内联行为（不会导致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表单中标签元素的行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！