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

发布时间：2020-12-14 19:29:56 所属栏目：资源来源：网络整理

导读：我在 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=bottomText

我在 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!