Question

我没有网页设计师的经验，但为了更多地了解CSS，我正在为自己的页面做样式表。我知道我现在这样做的方式可能很糟糕，不是推荐的方式，但请帮助我理解为什么这不起作用。

我有这样的表格：

<form action="/register" method="POST" id="registration_form">
    <p>
        <label for="username">Username</label>
        <input type="text" id="username" name="username"/>
    </p>
    <p>
        <label for="password">Password</label>
        <input type="password" id="password" name="password"/>
    </p>
</form>

在包含我自己的样式表之前，我已经包含了Eric Meyer's CSS reset，我在CSS中有这个规则：

#registration_form label {
    width: 100px;
}

我也尝试过：

label {
   width:100px;
}

我尝试将值更改为100px以上，但仍未应用。如果它有帮助，我有一个布局，其中包含这样的内容：

<body>
   <div id="navigation">
     ...
   </div>
   <div id="pagebox">
     {% block body %}{% endblock %}
   </div>
</body>

这是一个jinja2模板，当渲染时，body的内容会被一些不同的视图添加。以下是这些id的样式：

#navigation {
    text-align:center;
}

#navigation ul li {
    display:inline;
    margin-left:50px;
}

#pagebox {
    margin-left:50px;
    margin-right:50px;
    height:600px;
    background-color: #20f000;
}

为什么我的标签样式没有被应用？

Answer 1

我认为<label>默认为display:inline，因此width和height不会影响它。尝试向其添加display: inline-block。

已添加：作为评论中提及的成员Geoff Adams，display: inline-block存在一些浏览器兼容性问题。在这个特定的场景中，它应该有效，但see here可以获得更多信息。

Answer 2

label元素是内联元素，因此width样式不适用于它。

您可以让label和input元素浮动在p元素中。将overflow应用于p元素使其可用作浮动元素的容器：

#registration_form p {
  overflow: hidden;
}
#registration_form p label {
  float: left;
  width: 100px;
}
#registration_form p input {
  float: left;
}

为什么不应用此CSS规则？

2 个答案: