HTML，CSS - 使文本框宽度相同

我有第一行有2个文本框，第二行有一个文本框的页面。我想要使它们的宽度相同，下面的代码的可以在Chrome中正常工作，但在Firefox和IE中（在IE9中测试）宽度不同。如何在所有浏览器中使宽度相同？HTML，CSS - 使文本框宽度相同

<!doctype html> 
<html> 
<body> 
<form> 
    <input type="text" name="cnop" size="2"/><input type="text" name="cno" style="width:122px;"/><br> 
    <input type="text" name="cpono"/> 
</form> 
</body> 
</html>

铬

enter image description here

火狐

enter image description here

来源

2015-07-10 SyAu

内联样式一般都是馊主意。 –

您可以使用box-sizing: border-box;使输入宽度的对齐更容易跨浏览器（它考虑填充，边框和内容宽度）。它也使得像Sass这样的预处理器中的宽度计算变得非常简单。

input[type="text"] { 
    box-sizing: border-box; 
} 

input[name="cnop"] { 
    width: 33px; 
} 

input[name="cno"] { 
    width: 122px; 
} 

input[name="cpono"] { 
    width: 155px; 
}

检查小提琴：https://jsfiddle.net/mshtacea/

来源

2015-07-10 00:20:51

谢谢瑞恩。你的类似于@ReLeaf，但你的答案适合我的代码。 – SyAu

您可以为所有3输入标签分配width，前两个的总和等于第三个的值就足够了。您还必须重置浏览器的输入默认样式。

<!doctype html> 
<html> 
<body> 
<form> 
    <input type="text" name="cnop" style="width:30px;border:0;margin:0;padding:0"/><input type="text" name="cno" style="width:122px;border:0;margin:0;padding:0"/><br> 
    <input type="text" name="cpono" style="width:152px;border:0;margin:0;padding:0"/> 
</form> 
</body> 
</html>

来源

2015-07-10 00:12:49

我试过你的逻辑（30px，122px和152px），IE正确显示，但没有显示Chrome和firefox – SyAu

你必须重置所有浏览器的默认输入风格。我已经更新了答案。 –

如果使用盒大小的属性，设置窗体和百分比宽度固定宽度上你的表单输入，一切都应该很好地保持一致。

<form style="width: 200px;"> 
 
\t <input type="text" name="cnop" size="2" style="width: 25%;box-sizing: border-box;"><input type="text" name="cno" style="width: 75%;box-sizing: border-box;"><br> 
 
\t <input type="text" name="cpono" style="width: 100%;box-sizing: border-box;"> 
 
</form>

显然，这是最好的把这些样式属性到样式标签或样式表，但是这是一个切割和解决方案的干例子。

来源

2015-07-10 00:18:12 ReLeaf

您最好使用CSS来格式化控制。

<form> 
    <div class="container"> 
     <input type="text" name="cnop" class="input1"/> 
     <input type="text" name="cno" class="input2"/> 
    </div> 
    <div class="container"> 
     <input type="text" name="cpono"/> 
    </div> 
</form>

在样式表中，添加这些类

div.container { 
    display: block; 
    width: 200px; /* or whatever overall width you need */ 
} 

div.container input { 
    width: 100%; 
} 
div.container .input1 { 
    width: 30px; /* or whatever width or percentage you need */ 
} 
div.container .input2 { 
    width: 170px; /* or whatever width or percentage you need */ 
}

来源

2015-07-10 00:27:33

HTML，CSS - 使文本框宽度相同

回答

相关问题