下面是我的代码:
<table>
<tr>
<td colspan="2" style="white-space: nowrap">Field 1: <input type="text" name="member_name" style="width: 100%"/></td>
<td colspan="2" style="white-space: nowrap">Field 2: <input type="text" name="member_name2" style="width: 100%"/></td>
</tr>
<tr>
<td>Phone: <input type="text" name="phone" /></td>
<td>State: <select name="state">
<option value="TX">Texas</option>
</select></td>
<td>Phone: <input type="text" name="phone2" /></td>
<td>State: <select name="state2">
<option value="TX">Texas</option>
</select></td>
</tr>
</table>
问题是，将空白设置为nowrap的 有什么办法可以解决这个问题吗？
null元素扩展到相邻的 中，可能是因为子 中的宽度:100%位。
共1个答案
匿名用户
td中放置一个div。flex对齐元素。空白和宽度:100%.form-control {
display: flex;
}
.form-control input {
flex-grow: 1;
}<table>
<tr>
<td colspan="2">
<div class="form-control">
<label>Field 1: </label>
<input type="text" name="member_name"/>
</div>
</td>
<td colspan="2">
<div class="form-control">
<label>Field 2: </label>
<input type="text" name="member_name"/>
</div>
</td>
</tr>
<tr>
<td>Phone: <input type="text" name="phone" /></td>
<td>State: <select name="state">
<option value="TX">Texas</option>
</select></td>
<td>Phone: <input type="text" name="phone2" /></td>
<td>State: <select name="state2">
<option value="TX">Texas</option>
</select></td>
</tr>
</table>
相关问题
