為什么不應用此CSS規則？

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的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存在一些瀏覽器兼容性問題display: inline-block 。 在這種特定情況下，它應該可以工作，但是請參見此處以獲取更多信息。

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 個解決方案

解決方案1
8 已采納 2011-03-06 10:05:29

解決方案2
3 2011-03-06 10:13:16

為什么不應用此CSS規則？

問題描述

2 個解決方案

解決方案1 8 已采納 2011-03-06 10:05:29

解決方案2 3 2011-03-06 10:13:16

解決方案1
8 已采納 2011-03-06 10:05:29

解決方案2
3 2011-03-06 10:13:16