0

右に浮くと、右に浮かないリンクとは別の高さになるリンクに問題があります。これを生成するための最小コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        body {font: normal 12px/1.6 Arial; }
        .btn {background-color: Red; color:#000; padding: 5px 15px 5px 15px; }
    </style>
</head>
<body>
    <div>
        <a class="btn" href="#">Nice link</a>
        <a class="btn" style="float: right;" href="#">Bad link</a>
    </div>
</body>
</html>

これが結果です。 The

ボディスタイルから「Arial」を削除すると、問題ないように見えます。しかし、もちろんフォントのスタイルが必要です。

4

4 に答える 4

2

パディングはブロック要素でのみ機能し、フロートのために不良リンクがブロックのように機能すると思います。display:block を .btn に追加し、ナイス リンクを左にフロートします。

http://jsfiddle.net/4Qs5J/

于 2012-09-13T07:35:14.850 に答える
1

浮動要素は効果的にそれらをブロック レベル要素に変更するため (以前に存在しなかった場合)、パディングは通常のアンカーには適用されませんが、浮動要素には適用されます。

フローティングされていないアンカーに追加display: inline-block;するか、左のアンカーをフロートすることができます。インライン ブロックはインライン プロパティをアンカーとして保持しますが、寸法、パディング、マージンを適用できます。バージョン7以降のIEではインラインブロックが使われています。

于 2012-09-13T07:37:25.323 に答える
0

まず、お互いの高さを上げるために身長を述べる必要があります

float：left;

高さもパディングによって設定されることを忘れないでください

とにかくあなたがメニューを作っているように見えます、ただやっているのはどうですか

<ul>
<li style="float:left;"></li>
<li style="float:left;"></li>
</ul>

次に、2つのオブジェクトへのコンテナがあります

于 2012-09-13T07:48:12.760 に答える
0

私は自分のやり方で同じコードを実行しました

// css

    <style>
        body { font-family:Arial, Helvetica, sans-serif; font-size:14px; }
        .container { height:40px;}
        .container a{ color:#FFF; padding:10px; padding:7px; }
        .btn {background-color: Red; color:#000;   }
    </style>

// HTML

    <div class="container">
        <a class="btn" href="#" style="float: left;">Nice link</a>
        <a class="btn" style="float: right;" href="#">Bad link</a>
    </div>
于 2012-09-13T07:48:47.237 に答える