3

私は自分のサイトの新しいメニューに取り組んでいますが、リンク間のスペースを垂直方向に配置できないようです（リンク間の空白を増やしたい）何かアドバイスはありますか？

html

<ul class="menu">
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#services">SERVICES</a></li>
</ul>

css

ul.menu
{
list-style-type:none;
list-style-position: inside;
margin:0;
padding:0;
padding-bottom: 1cm;
}



.menu li a, .menu li a:visited
{
padding:12px 0 0 0px;
font-family: 'Roboto Condensed', sans-serif;font-size:20px;font-weight:700;
color:#FFFFFF;
background-color:#09F;
text-align:center;
padding:3px;
text-decoration:none;

}

.menu li a:hover, menu li a:active {
background-color:#666;
}

ご覧のとおり、私はcssの一部でギャップを試しました：{padding：12px 0 0 0px;}しかし、運がありません....他のすべては正常に機能します-fiddle @http://jsfiddle.net/DCxvy/を参照してください

4

2 に答える 2

2

アンカーはデフォルトでインライン要素です。特定のパディング値を追加するには、それらをインライン ブロック レベル要素としてレンダリングする必要があります。アンカー スタイルに追加display: blockします。

.menu li a { display: inline-block }

.menu li aまた、スタイルには の 2 つのエントリがあることに注意してくださいpadding。後者（3pxすべての側面でパディングを設定）は、以前の定義を上書きしています。

これはjsFiddle デモです。

于 2013-03-13T10:24:24.607 に答える
0

私が間違っていなければ、リンクの間に垂直にスペースを挿入したいと思っています。そのために必要なことは次のとおりです。

.menu li {
  margin-bottom: 10px;
}

マージンソリューションをいじります。

一方、メニューの背景を青の色合いのままにして、ホバー時に色を変更したい場合は、ここにそのためのフィドルがあります. また、CSS をリファクタリングして、より直感的な方法でルールを配置しました。

白い改行のない単色としてメニューの背景をいじります。

于 2013-03-13T15:01:34.237 に答える