在HTML中selectinput和文本input – 最好的方法来使等宽？
我有一个简单的表格（仅用于说明目的）…
<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 ，或将其放入表…
解决scheme是为表单元素指定框模型，并且浏览器在使用边框时倾向于同意：
input, select, textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
有normalize.css项目聚合这样的技巧。
填充将使文本更接近框的边缘。
尝试将边距设置为0像素，如果这看起来是正确的，玩弄它（如只设置保证金只剩）
与100％宽度的表格和单元格相同的问题，与文本框（宽度也在100％）比表格单元格宽。
这解决了我的问题在CSS：
table td { padding-right: 8px; }
不是有史以来最好的解决scheme，因为你可能会得到一些额外的空间到右侧。 但至less它不会隐藏起来！
