Question

我有这个页面，第一行有2个文本框，第二行有一个文本框。我想让他们的宽度相同，下面的代码在chrome中运行良好，但在firefox和IE（在IE9中测试）宽度是不同的。如何使宽度相同在所有浏览器中？

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

Firefox

enter image description here

Answer 1

您可以使用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/

Answer 2

您可以为所有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>

Answer 3

如果使用box-sizing属性，在表单上设置固定宽度，在表单输入上设置百分比宽度，则所有内容都应该很好地对齐。

＆＃13;

<form style="width: 200px;">
	<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>
	<input type="text" name="cpono" style="width: 100%;box-sizing: border-box;">
</form>

＆＃13;

显然，最好将这些样式属性放入样式标签或样式表中，但这是解决方案的一个简洁干燥的例子。

Answer 4

最好使用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 */
}

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

4 个答案: