在HTML中选择输入和文本输入-使宽度相等的最佳方法？
在HTML中选择输入和文本输入-使宽度相等的最佳方法？
提问于 2009-05-22 00:13:07
我有一个像这样的简单表单(仅用于说明目的)...
<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，或者将它们放入表格中……
回答 2
Stack Overflow用户
发布于 2009-05-22 00:30:53
填充将使文本更靠近方框的边缘。
尝试将边距设置为0px，如果这看起来是对的，可以尝试一下(就像只设置边距-仅向左)
Stack Overflow用户
发布于 2010-01-28 23:59:10
对于宽度为100%的表格和单元格也有相同的问题，文本框(宽度也为100%)比表格单元格更宽。
这解决了我在css中的问题：
table td
{
padding-right: 8px;
}这不是最好的解决方案，因为您可能会在右侧获得一些额外的空间。但至少它不再隐藏了！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/895904
复制相关文章
相似问题