0

ウェブサイトのトップナビゲーションを作っています。メニューにマージンバグがあります。

margin / padding : 0リスト項目とを定義しましたdisplay: inline-block。

デモを見る: http://tinkerbin.com/495Qb956

基本的に、リスト項目からその左右のマージンを削除し、このマージンが存在する理由を知りたいです。

4

2 に答える 2

2

デフォルトでは、 display:inline-blockは左からマージンを取ります。次のように書きます。

.top-right ul {
    background:black;
    height:43px;
    font-size:0;
}
.top-right ul li {
    display:inline-block;
    border:1px solid red;
        margin:0;
        padding:0;
        font-size:13px;
}

これをチェックしてくださいhttp://tinkerbin.com/YWeV7osy

于 2012-08-29T07:11:02.623 に答える
0

あなたが見ているその部屋は、ブロック間のスペースです。との間の空白をすべて削除する</li>と<li>、空白が消えます。基本的に、インラインブロックは文中の単語のように動作し、これらのブロックの2つの間の空白は1つのスペース文字に折りたたまれます。

1つの解決策は、フロートを使用してブロックをくっつけることです。

li { float: left; }

clearそのようなフローティング要素の後に続く要素が必要になる場合があります。

于 2012-08-29T07:15:13.993 に答える