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中的样子： enter image description here

这是IE中的样子： enter image description here

所以我今天遇到一个问题，就是他们没有在浏览器之间排队以及随着项目被添加到下拉列表中而变得更糟的事实（因为底部有一个固定的宽度）。

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

Answer 1

以下方法涉及CSS3 box-sizing和calc()。它适用于IE9 +和所有现代浏览器。

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 2

尝试这样的事情

<table>
        <tr>
            <td colspan="2">
                <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>
            </td>
            <td style="width: 100%;">
                <input type=text id=bottomTextbox />
            </td>
         </tr>
      </table>

CSS

table {
    width: 98%;
}

input {
    width: 100%;
}
select{
    width: 150px;/**may be**/
}

参见演示http://jsfiddle.net/JentiDabhi/dq3g5k3j/

Answer 3

以下是询问的行为，但它是使用flexbox代替table。我决定发布它，因为它可能会有所帮助。

flexbox flex-shrink可以实现这一目标;请查看以下代码段：

var j = 3;

document.querySelector("button").addEventListener("click", function () {
    var opt = document.createElement("option"),
    i;
    for (i = 0; i < j; i += 1) {
        opt.innerHTML += "123456789";
    }
    j += 1;
    document.querySelector("select").appendChild(opt);
});

.container {
    width: 98%;
}

.here {
    display: flex;
}
    
.select { flex-shrink: 0; width: auto; }
.input { flex-shrink: 1; width: 100%; }


select, input { width: 100%; }

<div class="container">
    <div>
        <input type="text" id="topTextbox" />
    </div>
    <div class="here">
        <div class='select'>
            <select>
                <option></option>
                <option>123456789</option>
                <option>123456789123456789</option>
            </select>
        </div>
        <div class='input'>
            <input type="text" id="bottomTextbox" />
        </div>
    </div>
</div>

<hr></hr>

<button>Add longer option value</button>

Answer 4

响应解决方案：

通过在文本输入和一个小CSS周围使用div - 标记调整标记，它将自动填充整个宽度（除非select - 框填充表格单元格。）

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

          <div><input type="text" id="bottomTextbox" /></div>
       </td>
</tr>
</table>

CSS样式：

table{
    width: 100%; /* your custom width */
}
input{
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    clear: none;
}
select{
    float: left;
    margin-right: 5px; /* your custom margin */
}
div{
    overflow: hidden;
}

请参阅the JSFiddle。

在动态填写select - 框时也可以这样做。

Answer 5

我认为应该为TABLE标签设置cellspacing和cellpadding属性，然后你可以使用适用于INPUT和SELECT标签的margin或padding css属性。

此外，对于跨浏览器，固定宽度可以正常工作。

示例HTML代码：

<table cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="2">
            <input type=text id=topTextbox style="width: 600px" />
        </td>
    </tr>
    <tr>
        <td>
            <select style="width: 200px">
                <option value="0"></option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
            </select>
        </td>
        <td >
            <input type=text id=bottomTextbox style="width:400px" />
        </td>
     </tr>

Answer 6

尝试使用像@Pete Suggestion那样的大小调整：

#topTextbox,#bottomTextbox{
    width: 100%;
    box-sizing: border-box;
}

Answer 7

我在Chrome和IE中测试了这一点。它似乎工作正常。就个人而言，我不喜欢使用不是百分比的值。但是，这很好。

http://jsfiddle.net/7sk6p3ex/

<html>
  <head>
    <style>
      .top{width: 300px;}
      .bottom{width: 148px;}/* The space between select & input = 4px */
    </style>
  </head>
<body>
  <table style="width: 100%;">
    <tr>
      <td><input class="top" type="text" id="topTextbox"></td>
    </tr>
    <tr>
      <td>
        <select class="bottom">
        <option value="0"></option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        </select>
      <input class="bottom" type="text" id="bottomTextbox">
     </td>
    </tr>
  </table>
</body>
</html>

Answer 8

模拟嵌套表，获得类似于表格的布局行为

如果您可以修改HTML标记，则可以通过模拟分别用div和span设置display: table和display: table-cell元素的嵌套表来实现所需的结果。（您可以使用实际的嵌套表，但这对于非表格数据而言在语义上并不理想。）

<强> HTML

<div class="input-combo">
    <span class="select">
        <select>
            <option value="0"></option>
            <option value="saab">ThisIsAReallyLongName</option>
            <option value="mercedes">ThisNameIsMuchLongerThanTheOther</option>
        </select>
    </span>
    <span class="input">
        <input type="text" />
    </span>
</div>

<强> CSS

.input-combo {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

.input-combo .select,
.input-combo .input {
    display: table-cell;
    box-sizing: border-box;    
}

.input-combo .select {
    padding-right: 0.25em;
}

您正在寻找的所需布局行为是表格的原生行为，即调整每个单元格的宽度，使单元格宽度的总和等于表格本身的宽度。浏览器自动而且智能地处理这个逻辑。

然后，您可以将每个输入元素设置为宽度为100％，填充每个单元格，并允许浏览器根据每个单元格内容的宽度确定单元格的宽度。

下面的示例比较两个相同的表，其唯一的区别是选择框中内容的宽度。 HTML和CSS是一样的。

示例：

＆＃13;
＆＃13;
table { width: 100%; } input, select { width: 100%; box-sizing: border-box; padding: 1px 0; /* normalize */ } .input-combo { display: table; border-collapse: collapse; width: 100%; } .input-combo .select, .input-combo .input { display: table-cell; box-sizing: border-box; } .input-combo .select { padding-right: 0.25em; }
＆＃13;
<table> <tr> <td><input type="text" /></td> </tr> <tr> <td> <div class="input-combo"> <span class="select"> <select> <option value="0"></option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> </select> </span> <span class="input"> <input type="text" /> </span> </div> </td> </tr> </table> <table> <tr> <td><input type="text" /></td> </tr> <tr> <td> <div class="input-combo"> <span class="select"> <select> <option value="0"></option> <option value="saab">ThisIsAReallyLongName</option> <option value="mercedes">ThisNameIsMuchLongerThanTheOther</option> </select> </span> <span class="input"> <input type="text" /> </span> </div> </td> </tr> </table>
＆＃13;
＆＃13;
＆＃13;

Answer 9

试试这个。对我来说很好。

CSS：

table {
    width: 98%;
}

input {
    width: 100%;
}

HTML：

<table>
    <tr>
        <td colspan="2">
            <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>
        </td>
        <td style="width: 100%;">
            <input type=text id=bottomTextbox />
        </td>
     </tr>
  </table>

Answer 10

尝试使用此代码

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

#topTextbox
{  
 width: 98%;
 }

#bottomTextbox
{  
   width: 80%;
}

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

10 个答案:

模拟嵌套表，获得类似于表格的布局行为