我正在努力解决一个问题:里面有一个表格单元格和按钮。在我 float 这个按钮之后,除了向左/向右移动之外,垂直位置也会发生变化 - 特别是 float 按钮移动到行的顶部。例如:
<table style="width: 100%">
<tr>
<td style="background-color: green;">
<select style="height: 100px;">
<option>Option 1</option>
</select>
<button>One</button>
<button>One</button>
<button style="float: right">Two</button>
</td>
</tr>
<tr>
<td style="background-color: red;">
<select>
<option>Option 1</option>
</select>
<button>One</button>
<button>One</button>
<button style="float: right">Two</button>
</td>
</tr>
</table>
重要的一点是:高度:100px。如果我使用这个值,按钮总是与选择控件对齐。但是 float 按钮总是落在该行的顶部战斗 Angular 。这是为什么?如何强制 float 元素与其他元素对齐?基本上我的目标是在表格单元格的右 Angular 放置按钮元素。
最佳答案
因为按钮通常设置为显示inline-block
,有点像文本,所以它们遵循vertical-align
(默认为middle
) 在表格单元格内 — 但随后应用 float
会强制它们显示 block
,这意味着它们不再显示为内联,或尊重文本流。
关于html - css float - 它在行高和位置方面有什么变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14606260/