-1

私は 1 つの問題に苦しんでいます: その中にテーブル セルとボタンがあります。このボタンをフロートさせた後、左右に移動するだけでなく、垂直位置も変更されます。特に、フロートされたボタンは行の一番上に移動します。例えば：

 <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/

重要なビットは: height: 100pxです。この値をいじると、ボタンは常に選択コントロールに揃えられます。しかし、フローティング ボタンは常に、ラインの一番上のファイト コーナーに着地します。何故ですか？浮動要素を他の要素と整列させるにはどうすればよいですか? 基本的に私の目標は、テーブル セルの右隅にボタン要素を配置することです。

4

1 に答える 1

3

ボタンは通常inline-block、テキストのように表示するように設定されているため、テーブルセル内でボタンは尊重vertical-alignされます（デフォルトは）。ただし、ボタンを適用すると、強制的に表示されます。つまり、ボタンはインラインで表示されなくなり、テキストフローを尊重します。middlefloatblock

于 2013-01-30T14:54:12.137 に答える