html - 使这些文本框对齐的正确 css 宽度是多少？

Question

我在 HTML 表格中有两行。这是它的简化 View :

#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>