4

<li>タグ内で padding プロパティを機能させることができません。

これは私のCSSです：

.menu li{
   height:50px;
   display: inline;
   padding:10px 15px 18px 15px;
   border-style: solid;
   border-width: 0px 2px;
   -moz-border-image: url(../img/menuborder.png) 0 2 stretch repeat;
   -webkit-border-image: url(../img/menuborder.png) 0 2 stretch repeat;
   -o-border-image: url(../img/menuborder.png) 0 2 stretch repeat;
   border-image: url(../img/menuborder.png) 0 2 stretch repeat;
   border-right:0;
}

.menu a{
   color:#fff;
   text-decoration: none;
   padding-top:10px;
}

ここに私の.HTMLがあります:

   <ul class="menu">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Incentives</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Forum</a></li>
        <li class="last"><a href="#">Help</a></li>
    </ul>

それでも、padding-top は a および li タグ内のテキストには影響を与えないようです。

私は何を間違っていますか？

ありがとう。

4

7 に答える 7

17

おそらく要素にパディングを適用する必要がありますa。また、上下のパディングを機能させるには、ブロック レベルの要素にする必要があります。

.menu a { 
    color: #fff;
    display: inline-block;
    text-decoration: none;
    padding: 10px 15px 18px 15px;
}

注: inline-blockIE7 以下では部分的にしかサポートされていません。上記が期待どおりに機能しない場合は、display: block;andを使用できます。float:left

ここでの基本的な問題は、CSS の s であり、タグがデフォルトであるという事実display:inlineに言及することも重要です。要素に上下のパディングを適用することはできません。liainlineinline

于 2012-10-22T20:57:20.827 に答える
5

パディングは機能しません

display: inline;

試す

display: block;

代わりに、オプションで

float: left;
于 2012-10-22T20:56:34.117 に答える
1

次のように高さに合わせて を設定することもできますline-height。ali

.menu a{
    color: #000;
    text-decoration: none;
    line-height: 50px;
}

デモはこちら: http://jsfiddle.net/9TcRP/

于 2012-10-22T21:01:10.143 に答える
0

li にクラス名を付けて、そのクラスのスタイルを試すことができる場合があります。

于 2012-10-22T21:02:55.703 に答える
0

メニュー自体に上部のパディングが必要です。アンカーまたはリスト要素ではありません。

.menu {padding-top: 10px;}
于 2012-10-22T21:03:15.140 に答える
0 
.menu li a{color:#fff;text-decoration: none;padding-top:10px;}

これにより、リスト項目自体にパディングが追加されます。にスタイリングを与える必要があります

.menu

リスト項目のブロックに他のすべてのパディング (左右) を追加するために、それ自体。

于 2012-10-22T20:56:38.820 に答える