爲什麼不應用此CSS規則？

我沒有作爲網頁設計師的經驗，但爲了瞭解更多關於CSS的知識，我正在爲我自己的頁面做樣式表。我知道我現在做的方式可能很糟糕，不是推薦的方式，但請幫助我理解爲什麼這不起作用。爲什麼不應用此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; 
}

我嘗試將值更改爲超過100像素，但仍然沒有得到應用。如果有幫助，我有一個佈局，其中包含這樣的事情：

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

這是一個Jinja2的模板，和身體的內容是由一些不同的視圖中添加，當它呈現。以下是這些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; 
}

爲什麼我的標籤樣式不適用？

來源

2011-03-06 Geo

我認爲<label>默認有display:inline，所以width和height不會影響它。嘗試將display: inline-block添加到它。

補充：作爲成員Geoff Adams在評論中指出，有與display: inline-block一些瀏覽器兼容性問題。在這個特定的情況下，它應該工作，但see here欲瞭解更多信息。

來源

2011-03-06 10:05:29

'顯示：直列block'並不是真正意義上的跨瀏覽器很遺憾。如果你需要它在較舊的瀏覽器上工作（閱讀：Internet Explorer），那麼你可能需要'display：block'，'float：left'並進入浮盒模型的精彩世界:) – 2011-03-06 10:11:04

@Geoff Adams - 多大我們在談論IE嗎？ IE6將支持這種特定的情況。 – 2011-03-06 10:16:31

謝謝！它工作得很好！ – Geo 2011-03-06 10:19:09

label元素是內聯元素，所以width樣式不適用於它。

你可以使p元素中的label和input元素浮動。應用overflow到p元件使得作爲浮動元素的容器工作：

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

來源

2011-03-06 10:13:16 Guffa

天啊！這比我想象的更復雜:) – Geo 2011-03-06 10:18:39

爲什麼不應用此CSS規則？

回答

相關問題