在 HTML 中选择输入和文本输入-使宽度相等的最佳方法？

我有这样一个简单的形式(仅用于说明目的) ..。

<form>


<div class="input-row">
<label>Name</label>
<input type="text" name="name" />
</div>


<div class="input-row">
<label>Country</label>
<select name="country">
<option>Australia</option>
<option>USA</option>
</select>
</div>


</form>

我使用 CSS 的布局方法如下..。

form  {
width: 500px;
}


form .input-row {
display: block;
width: 100%;
height: auto;
clear: both;
overflow: hidden; /* stretch to contain floated children */
margin-bottom: 10px;
}


form .input-row label {
display: block;
float: left;
}


form .input-row input,
form .input-row select {
display: block;
width: 50%;
float: right;
padding: 2px;
}

除了我的 select元素(无论如何在 Firefox 中)并不总是与我的其他 input元素相同的宽度之外，这一切都很好地对齐了。它通常是窄了几个像素。

我试过将宽度改为像素大小(例如 200px) ，但没有效果。

什么是最好的方法，让这些都有相同的宽度？我希望它不会诉诸于我设置的 select的 width单独，或把他们放在表..。

54650 次浏览
小开

填充将使文本更接近框的边缘。

尝试将边距设置为0px，如果这看起来是正确的，那么可以尝试使用它(就像只设置边距-只向左)

小开
最佳答案

解决方案是为表单元素指定框模型，当您使用边框时，浏览器往往最为一致:

input, select, textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

有一个 正常化 CSS项目汇集了这些技巧。

小开

宽度为100% 的表格和单元格也有同样的问题，文本框(宽度也为100%)比表格单元格宽。

这解决了我在 css 中的问题:

table td
{
padding-right: 8px;
}

这不是最好的解决方案，因为您可能会在右侧获得一些额外的空间。但至少它不再躲藏了！


提交答案