html – 什么是正确的CSS宽度使这些文本框排队？

我在 HTML表格中有两行.这是一个简化的视图：

<table>
  <tr>
    <td>
      <input type=text id=topTextBox />
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option value="0"></option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
      </select>
      <input type=text id=bottomTextBox />
    </td>
  </tr>
</table>

第一行有一个长文本框,第二行有一个下拉列表和一个文本框.我试图得到它,所以这些排列与相同的总宽度.问题是,随着新数据进入下拉列表中,宽度将会改变,所以我试图找出底部文本框中的正确的CSS,以便它在右侧与顶部的文本框对齐.

当前顶部的文本框的宽度为：

#topTextBox {
  width: 98%;
}
#bottomTextBox {
  width: 693px;
}

以下是Firefox的外观：

这是IE的样子：

所以我今天有一个问题,他们不排队浏览器,以及事实会变得更糟,因为项目添加到下拉菜单(因为底部有一个固定的宽度).

无论整个表格有多大,以及新的项目被添加到下拉列表中,正确的方法是保持这些文本框在右侧对齐.

解决方法

以下方法涉及CSS3 box-sizing和 calc().它可以在IE9和所有现代浏览器上正常工作.

table {
  width: 100%;
}
input,select {
  Box-sizing: border-Box;
  display: inline-block;
}
#topTextBox {
  width: 100%;
}
select {
  width: calc(30% - 4px);
  /* why 4px? https://stackoverflow.com/q/5078239/483779 */
}
#bottomTextBox {
  width: 70%;
}

<table>
  <tr>
    <td>
      <input type="text" id="topTextBox" />
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option value="0"></option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
      </select>
      <input type="text" id="bottomTextBox" />
    </td>
  </tr>
</table>