Question

我有一个元素<select> </select>，表格行中有一些<option> </option>。我希望此选择填充所有行空间，因为其他一些<input type = "text">使行大于初始<select>宽度。

以下是我的代码，向您展示空白区间：

<table>
    <tr>
        <td>
            <input type = "text" />
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value = "option1" >value 1</option>
                <option value = "option2" >value 2</option>
            </select>
        </td>
    </tr>
</table>

如果您复制此代码，您将清楚地看到此元素之间的区别。我该怎样做才能让它们处于相同的宽度？

Answer 1

只需将width: 100%添加到选择元素：

table tr td select{
    width: 100%;
}

<table>
    <tr>
        <td>
            <input type = "text" />
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value = "option1" >value 1</option>
                <option value = "option2" >value 2</option>
            </select>
        </td>
    </tr>
</table>

Answer 2

在最简单的情况下，为select元素添加宽度：

td {
  border: 1px dotted blue;
  }
select {
  width: 100%;
  }

<table>
    <tr>
        <td>
            <input type = "text" />
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value = "option1" >value 1</option>
                <option value = "option2" >value 2</option>
            </select>
        </td>
    </tr>
</table>

Answer 3

只需将<select>的宽度设置为100%，如下所示：

＆＃ 13;

＆＃13;

*{
  margin:0;
  padding:0;
}
select{
 width:100%;
}

＆＃13;

<table>
    <tr>
        <td>
            <input type = "text" />
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value = "option1" >value 1</option>
                <option value = "option2" >value 2</option>
            </select>
        </td>
    </tr>
</table>

＆＃13;

Answer 4

你也可以像这样在css中设置元素宽度：

input, select {
    width : 100px;
}

如何使元素填充表格行

4 个答案: