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

我有一个像这样的简单表格（仅用于说明目的）...

<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单独，或将它们放入表...

css xhtml

— 亚历克斯
source

我可以告诉你一个肮脏的小秘密吗？我使用表格来格式化表格。这只是方式太容易了。但是，Sssssshh，请将其保持在低位。

— Paolo Bergantino，2009年

严肃地说，您是否尝试过将边距和填充设置为0？

— Paolo Bergantino，2009年

Paolo，我最初是这样做的（很容易将输入宽度设置为相同的宽度），但我一直努力使它的工作台数减少，并且在过去8个月左右的时间里都取得了成功……这只是让我感到悲伤。

— 亚历克斯

我进行了填充（在边界和文本之间留出一些喘息的空间），并且当我删除填充时，差异很小（但后来我的文本难以适应边界）

— Alex

哦，我知道。我喜欢CSS，很显然我同意CSS的语义相关性等观点，但是在形式方面，我就像表的灵活性和简单性一样。无论如何，我不确定为什么会这样。表单字段臭名昭著，使它们无法自定义样式是多么痛苦。抱歉。:)

— Paolo Bergantino，

Answers:

165

解决方案是为表单元素指定盒子模型，当您使用border-box时，浏览器通常会达成共识：

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

有normalize.css项目汇总了这些技巧。

— 内核
source

可以尝试一下...您对此主题有什么建议阅读吗？

— 亚历克斯

这对我有用，很棒。多年来一直困扰着我。

— SpliFF

如果元素包含在同一元素中，则还可能需要为它们提供标准的垂直对齐方式。

— 安迪

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

— Philipp Michael

如果其他任何人都在尝试使用“搜索”类型的输入而不是文本来尝试，那么请确保将其定位input[type="search"]为目标，因为这border-sizing: content-box在某些浏览器中默认为该目标。

— 亚当·格兰特

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

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

— 卢克·谢弗
source

我尝试在输入，选择和输入行div上使用padding：0＆margin：0与！important，但是它只是将它们紧密地捆在一起。选择框大约缩小2px（可能与边框有关）

— Alex

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

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

table td
{
    padding-right: 8px;
}

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

— 赫尔曼·科德斯
source

我对这样的绝对尺寸感到怀疑。如果您使用其他浏览器，其他窗口管理器/ Windows样式，则可能无法再使用了。

— stracktracer 2012年