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

【问题标题】：Select inputs and text inputs in HTML - Best way to make equal width?在 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，或者将它们放入表格中......

【问题讨论】：

我能告诉你一个肮脏的小秘密吗？我使用表格来格式化我的表格。这只是方式太容易了。但是 Sssssshh，保持低调。
说真的，您是否尝试过将边距和内边距设置为 0？
Paolo，我最初是这样做的（并且很容易使输入具有相同的宽度），但我努力减少表格，并且在过去 8 个月左右取得了成功......这个只是让我感到悲伤。
我有填充（在边框和文本之间留出一些喘息的空间），当我删除填充时，差异会变小（但是我的文本很难靠在边框上）
哦，我知道了。我喜欢 CSS，并且我显然同意它的语义相关性等想法，但是当涉及到表单时，我只是喜欢表格的灵活性和简单性。无论如何，我不确定为什么会这样。表单字段臭名昭著，因为要让它们按您想要的方式设置样式是多么痛苦。对不起。 :)

标签： css xhtml

【解决方案1】：

解决方法是为表单元素指定box模型，浏览器在你使用border-box时往往最认同：

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

有一个normalize.css 项目集合了这些技巧。

【讨论】：

不妨试一试...你有什么关于这个主题的推荐读物吗？
这对我有用，太棒了。这一直困扰着我多年。
如果元素包含在同一个元素中，您可能还希望给它们一个标准的垂直对齐方式。
对于 IE7，您可以使用 box-sizing-polyfill。只需在box-sizing: border-box; 之后添加*behavior: url(boxsizing.htc);
如果其他人在尝试使用“搜索”类型输入而不是文本来尝试此操作时，请务必定位 input[type="search"]，因为在某些浏览器中默认为 border-sizing: content-box。

【解决方案2】：

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

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

【讨论】：

我尝试在输入、选择和输入行 div 上使用 padding: 0 & margin: 0 和 !important，但它只是将它们紧紧地捆绑在一起。选择框大约窄了2px（可能与边框有关）

【解决方案3】：

对于 100% 宽度的表格和单元格有同样的问题，文本框（宽度也为 100%）比表格单元格宽。

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

table td
{
    padding-right: 8px;
}

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

【讨论】：

我对这样的绝对尺寸表示怀疑。如果您使用其他浏览器、其他窗口管理器/窗口样式，这可能不再起作用。