在HTML中选择输入框和文本输入框 - 最好的方式是使宽度相等？

Question

我有一个简单的表单，如下所示（仅用于举例）...

<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 或将它们放入表格中...

- alex

---

我能告诉你一个小秘密吗？我使用表格来格式化我的表单。这太容易了。但是，嘘，不要让别人知道。 - Paolo Bergantino

说真的，你试过将margin和padding设置为0吗？ - Paolo Bergantino

我添加了填充（以便在边框和文本之间留出一些空间），当我删除填充时，差异变小了（但是我的文本紧贴着边框）。 - alex

哦，我知道。我喜欢CSS，显然也同意它的语义相关性等思想，但是当涉及到表单时，我只是喜欢表格的灵活性和简单性。无论如何，我不确定为什么会发生这种情况。表单字段因其难以按照自己的意愿进行样式设置而臭名昭著。抱歉。 :) - Paolo Bergantino

我刚在每个主要浏览器中进行了测试...将选择集宽度增加4px，在Chrome、IE、FireFox和Safari中都有令人满意的结果。我还没有尝试过被接受的答案... - Brett Weber

Answer 1

解决方法是为表单元素指定盒模型，使用 border-box 时，大多数浏览器的显示效果相似：

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

有一个叫做 normalize.css 的项目，它聚合了这样的技巧。

- Kornel

---

这对我有用，太棒了。这件事困扰我很长时间了。 - SpliFF

如果这些元素被包含在同一个元素中，您可能还想为它们提供标准的垂直对齐。 - Andy

对于IE7，您可以使用box-sizing-polyfill。只需在box-sizing: border-box;之后添加*behavior: url(boxsizing.htc);即可。 - Philipp Michael

我在一段时间前已经点赞了这个答案。现在又找到了回来 :) - Jeff Hines

如果其他人正在尝试使用“搜索”类型的输入而不是文本，请确保将其定位为input[type="search"]，因为在某些浏览器中，它默认为border-sizing: content-box。 - Adam Grant

Answer 2

在使用100％宽度的表格和单元格时，遇到了与文本框（宽度也为100％）比表格单元格更宽的相同问题。

以下CSS代码解决了我的问题：

table td
{
    padding-right: 8px;
}

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

- Herman Cordes

---

我对这样的绝对尺寸持怀疑态度。如果您使用另一个浏览器、另一个窗口管理器/窗口样式，那么这很可能不再起作用。 - stracktracer

Answer 3

填充会使文本靠近盒子的边缘。

尝试将边距设置为0像素，如果看起来正确，请尝试调整它（例如仅设置margin-left）

- Luke Schafer

---

我尝试在输入框、下拉框和输入行 div 上使用 padding: 0 和 margin: 0 以及 !important，但它们仍然非常紧凑。选择框大约窄了 2 像素（可能与边框有关）。 - alex