Question

我正在努力解决一个问题：在其中放置一个表格单元格和按钮。在我浮动此按钮后，除了向左/向右移动之外，垂直位置也会改变 - 特别是浮动按钮移动到线的顶部。例如：

 <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 。如果我玩这个值，按钮总是与选择控件对齐。但漂浮的按钮总是落在线的顶部战斗角落。这是为什么？如何强制浮动元素与其他元素对齐？基本上我的目标是在表格单元格的右角有按钮元素。

Answer 1

因为按钮通常设置为显示inline-block，类似文字，所以他们尊重表格单元格中的vertical-align（默认为middle） - 但随后应用{{1}强制它们显示float，这意味着它们不再显示为内联，或者尊重文本流。

css float - 它相对于行高和位置有什么变化

1 个答案: