调整 HTML 表单中标签元素的行高
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6246119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adjusting line-height of label elements in HTML forms
提问by Yarin
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>
元素的表单,但是<label>
的两行之间的空间太大,我似乎无法调整<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.
这是 a<label>
和 a的示例<p>
,两者都应用了相同的 CSS。如您所见,<p>
调整正确,而<label>
保持不变。
CODE:
代码:
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>
回答by marcio
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.
所有 HTML 标签都按类别分类,描述了它们的性质。这种分类可以涉及语义、行为、交互和许多其他方面。
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
标签归类于“流内容”标签类别。但两者之间有一个细微的区别: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.
这一切在实践中意味着什么?浏览器默认呈现将遵循指定的标签分类,并将p
标签视为块元素,而label
标签将默认视为行内元素。您可以通过覆盖默认的 CSS 规则来修改它:只需告诉浏览器您希望您label
像块元素一样呈现。
label {
display: block;
}
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).
您需要这样做,因为内嵌 (display:inline) 元素不能具有height
, line-height
, margin-top
,等属性margin-bottom
(它们将被忽略)。
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;
}
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 的文档总是好的。这是一个很好的显示类别的图表,它可以为您节省大量时间,特别是在处理这些小怪癖时。
回答by Gman
I think what's Marcio is trying to say is that in inline
elements (like span
s or label
s), which can reside one after another in the text, you can't specify attributes that apply to the whole paragraph.
我认为 Marcio 想说的是,在inline
元素(如span
s 或label
s)中,可以一个接一个地驻留在文本中,您不能指定适用于整个段落的属性。
The obvious one is text-align
: the paragraph should specify the align and not the individual span
s. So as line-height
and such.
显而易见的一个是text-align
:段落应该指定对齐而不是单个span
s。如此line-height
如此。
The opposite to the inline
elements are the block
elements like div
or p
which occupy a square on a page and are laid out between each other on a higher block-level. This behavior is controlled with the CSS attribute display
with which can make div
behave just like span
and vice versa.
与inline
元素相反的是block
像div
或p
这样的元素,它们在页面上占据一个正方形,并在更高的块级别上彼此布置。这种行为是由 CSS 属性控制的display
,它可以使div
行为就像span
,反之亦然。
回答by Fredrik
Not entirely sure why, but it will work if you set display: block;
on the label
不完全确定为什么,但如果你display: block;
在标签上设置它会起作用