輸入寬度在css級別和元素級別定義

Question

<style>

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

</style>
<body>

<input type="text" name="test" value="test" size="5" />
</body>

當在瀏覽器（Firefox 5）上查看時，它出現的“大小”是固定的200px。 似乎我指定的大小完全被忽略了。

這是來自MVC項目，這是它附帶的默認樣式css。 暫時，我取下寬度：200px。 但有沒有辦法讓它保持在那里，並在“輸入”級別覆蓋它？

我也試過了

<input type="text" name="test" value="test" width="50px" />

它根本沒有覆蓋。

Answer 1

如果要在元素級別覆蓋CSS寬度，請嘗試直接將樣式標記應用於元素：

<input type="text" name="test" value="test" style="width: 50px;" />

這對我有用：

<html>
   <style>

      input[type="text"] 
      {
         width: 200px;
         border: 1px solid #CCC;
      }
</style>
<body>
      <input type="text" name="test" value="test" style="width: 50px;" />
</body>
</html>

編輯添加：

是的，混合HTML w / CSS被認為是禁忌，所以正確的解決方案是將它最終提取到一個類：

.my_text_box {
    width: 50px;
 }

然后：

<input type="text" name="test" value="test" class="my_text_box" />

Answer 2

不要在HTML中設置顯示樣式。

使用：

<input class="narrowInput" type="text" name="test" value="test" />

要么：

<input id="narrowInput" type="text" name="test" value="test" />

只是不要使用“narrowInput”。 使用具有業務含義的名稱，即：描述輸入數據用途的名稱。

然后CSS是：

input.narrowInput
{
    width: 50px;
}

要么：

#narrowInput
{
    width: 50px;
}

Answer 3

刪除

input[type="text"] 
{
    width: 200px; //THIS
}

要么

<input type="text" name="test" value="test" size="5" <--//THIS />

選擇使用其中一種來設計樣式。

輸入寬度在css級別和元素級別定義

問題描述

3 個解決方案

解決方案1
20 已采納 2011-08-07 00:07:22

解決方案2
3 2011-08-07 00:20:58

解決方案3
0 2011-08-07 00:14:38

輸入寬度在css級別和元素級別定義

問題描述

3 個解決方案

解決方案1 20 已采納 2011-08-07 00:07:22

解決方案2 3 2011-08-07 00:20:58

解決方案3 0 2011-08-07 00:14:38

解決方案1
20 已采納 2011-08-07 00:07:22

解決方案2
3 2011-08-07 00:20:58

解決方案3
0 2011-08-07 00:14:38