使这些文本框排成一行的正确css宽度是多少？

Question

我在HTML表格中有两行.以下是它的简化视图:

#topTextbox {
  width: 98%;
}

#bottomTextbox {
  width: 693px;
}

<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,以便它在右侧与顶部文本框对齐.

这是它在Firefox中的样子:

这是IE中的样子:

所以今天我有一个问题,他们不会跨浏览器排队,以及随着项目被添加到下拉列表中这会变得更糟(因为底部有一个固定的宽度).

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

Answer 1

这个方法涉及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? http://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>