CSS未应用于<label>标签

Question

我正在开发一个表单，并为标签设置了大小并将其右对齐以使其看起来得体。但是CSS未被应用。以下是我的代码：

label{
    width: 50%;
    text-align: right;
}

Fiddle

我该怎么让这个工作起来？

- Rahul Desai

---

它正在运行，伙计 => http://jsfiddle.net/46xF5/2/ ...你的布局有问题，改变DOM :) - NoobEditor

请看这里：http://jsfiddle.net/46xF5/3/ - Karuppiah RK

Answer 1

请尝试在您的代码示例中测试

display:inline-block;

查看演示

这是一个演示链接。

- saman khademi

---

你能告诉我为什么我们需要使用这个吗？ - Rahul Desai

默认情况下，某些 HTML 元素具有默认的 CSS 值，例如 p 具有 margin-top 和 margin-bottom，body 具有 margin:20px，因此 label 具有 display:inline。您可以为 dispaly inline 设置宽度，因为它是内联的。 - saman khademi

一个后续问题：如何将按钮置于中心？margin: 0 auto;无效。http://jsfiddle.net/46xF5/8/ - Rahul Desai

我更新了你的fiddle http://jsfiddle.net/46xF5/9/ 当你没有为元素设置宽度或使用浮动margin:0 auto时不起作用，最好使用<center>标签或为父DIV设置text-align:center。 - saman khademi

我没有使用<center>标签，因为它不被推荐。无论如何，margin-left: 50%;解决了问题。谢谢！ - Rahul Desai

Answer 2

你可以将它变成一个inline-block元素：

更新的示例在此处

label{
    width: 50%;
    text-align: right;
    display:inline-block;
}

您需要这样做，因为 label 是一个 inline 元素，以下内容适用于它：

10 可视化格式模型详细信息 - 10.2 内容宽度：'width' 属性

此 [width] 属性不适用于非替换的内联元素。非替换内联元素框的内容宽度是它们内部呈现内容的宽度（在任何子元素的相对偏移之前）。请记住，内联框流入行框中。行框的宽度由其包含块给出，但可能会因浮动元素的存在而缩短。

- Josh Crozier

Answer 3

像这样

demo

css

label{
    width:50%;
    text-align: right;
    border:1px solid red;
    display:inline-block;
}

- Falguni Panchal

Answer 4

fiddle: http://jsfiddle.net/46xF5/7/

将CSS代码更改为以下内容

body{
    font-family: "Arial", Helvetica, sans-serif;
}
/*changes here*/
#book_tickets label{
    width: 50%;
    display:inline-block;
    text-align: left;
}

- Krish

Answer 5

在你的 label 中添加 display:inline-block Fiddle

- Karuppiah RK