web-dev-qa-db-ja.com

CSSで水平メニュー項目間の間隔を広げるのに問題がある

HTMLは次のとおりです。

<div id="menu">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
    </ul>
</div>

CSSは次のとおりです。

li {
    display:inline;
    padding: 10px;
}
#menu {
    margin: 21px 646px 21px 646px;
}

メニューの間隔を広げることができないようです。そのために何を調整する必要がありますか？

htmlcssmenumargin
4
Presto

試してみてください

a { 
    display: block;
    padding: 10px 30px;
}

編集

このようなものが欲しいですか？ http://jsfiddle.net/Y8Ng7/

あなたがナビゲーションのために持っているそのばかげたマージンを取り除き、liパディングを増やすだけです

li {
    display:inline;
    padding: 10px 40px;
}

Div要素を中央に配置するには、margin: 21px 646px 21px 646px;を実行しないでください

margin: 21px auto;を実行するだけです

7
CRABOLO

リストメニューにdisplay:inline-block;を追加するだけです。

CSSを次のように変更します：

li {
   display:inline-block;
   padding: 10px;
}

#menu {
    margin: 21px 646px 21px 646px;
}

または参照 ここ

1
Ajay Gupta

リストアイテムを操作するのではなく、アンカーにパディングを追加してみてください。例：

#menu li a { padding: 10px; display: block; }
0
Benjamin