html - 文本对齐 : right; not working for <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 元素是 block 元素，因此其宽度默认为 100%。

您必须将 text-align: right; 放在您案例中的 div 元素上，或者应用 display: block;到您的标签

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