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

您可以将文本对齐到任何元素的右侧，包括标签。

HTML：

<label>Text</label>

的CSS：

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

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

Answer 3

如其他答案所述，label是一个内联元素。但是，您可以将text-align应用于标签，然后以#name_label { display: inline-block; width: 90%; text-align: right; }为中心。

display: inline-block

为什么用display: inline而不是label？由于无法对齐display: inline-block的原因，它是内联的。

为什么用display: block而不是display: block？您可以使用display: inline-block，但是它将在另一行。 inline结合了block和let x = async function () { return new Promise((res, rej) => { setTimeout(async function () { console.log("finished 1"); return await new Promise((resolve, reject) => { // delete the return and you will see the difference setTimeout(function () { resolve("woo2"); console.log("finished 2"); }, 5000); }); res("woo1"); }, 3000); }); }; (async function () { var counter = 0; const a = setInterval(function () { // counter for every second, this is just to see the precision and understand the code if (counter == 7) { clearInterval(a); } console.log(counter); counter = counter + 1; }, 1000); console.time("time1"); console.log("hello i starting first of all"); await x(); console.log("more code..."); console.timeEnd("time1"); })();的属性。它是内联的，但是您也可以给它一个宽度，高度并对齐它。

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

3 个答案: