html - css float - 它在行高和位置方面有什么变化

Question

我正在努力解决一个问题:里面有一个表格单元格和按钮。在我 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>

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

重要的一点是:高度:100px。如果我使用这个值，按钮总是与选择控件对齐。但是 float 按钮总是落在该行的顶部战斗 Angular 。这是为什么？如何强制 float 元素与其他元素对齐？基本上我的目标是在表格单元格的右 Angular 放置按钮元素。

Answer 1

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