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的{{1}}，或者将它们放入表格中......

Answer 1

解决方案是为表单元素指定框模型，并且当您使用border-box时，浏览器往往最同意：

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

有normalize.css项目聚合了这些技巧。

Answer 2

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

尝试将边距设置为0px，如果看起来正确，请使用它（就像只设置margin-left）

Answer 3

100％宽度的表和单元格存在同样的问题，文本框（也宽度为100％）比表格单元格宽。

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

table td
{
    padding-right: 8px;
}

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

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

3 个答案: