Question

在this example中，我在表单标签上设置了width:200px。由于某些原因，此功能未应用，并且在Chrome开发工具中查看时，该字段显示为0宽度。

知道为什么吗？

Answer 1

label是一个内联元素，就像span一样。它没有宽度，但随其内容流动。为了使其行为像div，您必须指示它像块级元素一样：

display: block

从那里，您可以添加宽度：

width: 200px;
float: left;

Answer 2

如上所述，您需要让您的标签行为像block元素，以使其尊重您的width声明。最简单的方法是将其设置为inline-block，如下所示：

 #form label {
  width:200px;
  display: inline-block;
 }

或者，正如@David所提到的那样，将它漂浮起来。 This article描述了跨浏览器实现此功能。

Answer 3

这是因为标签是inline element，因此没有width属性。要设置宽度，需要将其设置为块或内联块元素：

#form label {
    display: block;
    width: 200px;
}

Answer 4

Label是一个内联元素，因此您无法对其应用固定宽度（除非您更改其显示行为）。请参阅此处以获取选项/浏览器兼容性的快速地图