输入宽度在css级别和元素级别定义

Question

<style>

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

</style>
<body>

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

When this is viewed on browser (Firefox 5), the "size" it appears is a fixed 200px. 当在浏览器（Firefox 5）上查看时，它出现的“大小”是固定的200px。 It seems the size I specified is completely ignored. 似乎我指定的大小完全被忽略了。

This is from a MVC project, and that is the default style css that comes with it. 这是来自MVC项目，这是它附带的默认样式css。 For the time being, I took off the width: 200px. 暂时，我取下宽度：200px。 But is there a way to keep it there, and override it at the "input" level? 但有没有办法让它保持在那里，并在“输入”级别覆盖它？

I also tried 我也试过了

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

It did not override at all. 它根本没有覆盖。

Answer 1

If you want to override the CSS width at the element level, try applying the style tag to the element directly: 如果要在元素级别覆盖CSS宽度，请尝试直接将样式标记应用于元素：

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

This works for me: 这对我有用：

<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>

Edited to Add: 编辑添加：

Yes, mixing HTML w/CSS is considered a no-no, so the proper solution would be to extract it out to a class in the end: 是的，混合HTML w / CSS被认为是禁忌，所以正确的解决方案是将它最终提取到一个类：

.my_text_box {
    width: 50px;
 }

Then: 然后：

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

Answer 2

Don't set display style in the HTML. 不要在HTML中设置显示样式。

Use: 使用：

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

Or: 要么：

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

Only don't use "narrowInput". 只是不要使用“narrowInput”。 Use a name that has a business meaning, that is: one that describes the purpose of the input data. 使用具有业务含义的名称，即：描述输入数据用途的名称。

Then the CSS is: 然后CSS是：

input.narrowInput
{
    width: 50px;
}

Or: 要么：

#narrowInput
{
    width: 50px;
}

Answer 3

Remove either 删除

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

or 要么

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

Choose to style using one or the other. 选择使用其中一种来设计样式。

输入宽度在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