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

http://jsfiddle.net/qS6gh/1/

重要的一点是：高度：100像素。如果我使用此值，则按钮始终与选择控件对齐。但是浮动按钮始终位于行的顶部战斗角。这是为什么？如何强制浮动元素与其他元素对齐？基本上，我的目标是在表格单元格的右上角具有按钮元素。

最佳答案

因为按钮通常设置为显示inline-block，有点像文本，所以它们在表单元格中尊重vertical-align（默认为middle），但是应用float会强制它们显示block，这意味着它们不再内联显示或尊重文本流。

关于html - css float-关于行高和位置会发生什么变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14606260/