0

float を使用すると、同じ行にある 3 つの要素が同じ高さで垂直方向に整列されないのはなぜですか?

これはブラウザー固有のようです。Gecko (Firefox) ではレイアウトが壊れており、正しい要素が別の行に配置されていますが、Chromium ではレイアウトは問題ありません。

HTML マークアップ:

<div>
    <p>
        <a class="left" href="left">left</a>
        <a class="center" href="center">center</a>
        <a class="right" href="right">right</a>
    </p>
</div>

CSS スタイル:

div{width: 100%;margin: 20px 0; }
div p{width: 100%; white-space: nowrap; text-align: center;border: 1px solid blue;}
a.left{float: left;}
a.center{}
a.right{float: right;}

これは、FireFox でのレイアウト結果です。 ここに画像の説明を入力

便宜上、このfiddlerを見てください。

以前にこの問題を見たことがあることは知っていますが、髪を引っ張るだけで解決策が見つかりません!

4

1 に答える 1

0

わかりました、実際に「うまくいく」非常に簡単な回避策があるようです。このような基本的な質問に対して（使用可能な）回答が得られなかったため、質問として投稿します。

右の要素がHTML マークアップの中央の要素の前に配置されている場合、Gecko (Firefox) のレイアウトは問題ありません。

<div>
    <p>
        <a class="left" href="left">left</a>
        <a class="right" href="right">right</a>
        <a class="center" href="center">center</a>
    </p>
</div>

この論理が当てはまる理由はわかりませんが、Mozilla の人々には、この動作が適切であるという完全な理由があると確信しています...

于 2013-10-26T17:08:55.563 に答える