text-align:right; 不适用于<label>

Question

很简单,我无法让文本在<label>元素中对齐.

HTML

<div id="contact_form">
 <label for="name" id="name_label">Name:</label>
 </div>

CSS

#contact_form label {
  text-align: right;
}

我的页面:http://freshbeer.lv/development/en/contact.php

您可以看到名称,电话,电子邮件等标签...左侧对齐,但我需要它们与右侧对齐,所以有人可以提出建议吗？

Answer 1

Label是一个内联元素 - 因此,除非定义宽度,否则其宽度与字母跨度完全相同.您的div元素是块元素,因此其宽度默认为100%.

你将不得不放置text-align: right;在上div元素在你的情况下,或应用display: block;到您的label

另一种选择是为每个标签设置宽度然后使用text-align.display: block使用此方法不需要该方法.

Answer 2

您可以使文本与任何元素（包括标签）内部的右侧对齐。

网页：

<label>Text</label>

CSS：

label {display:block; width:x; height:y; text-align:right;}

这样，您就可以为标签指定宽度和高度，并使其中的任何文本向右对齐。