1

いくつかのリンクを含むメニューバーを作成しようとしています。これが私の関連コードです：

CSS:

#menuBar {
    overflow: auto;
    padding: 0px 0px;
    margin: 15px 0px;
}
div#menuItem ul li {
    padding: 0px 20px 0px 20px;
    list-style-type: none;
    display: inline;
}
div#menuItem ul a {
    font-size:14px;
}

HTML

<div id="menuBar">
<div id="menuItem"> 
<ul>
<li> <a href="index.php"> HOME</a> </li>
<li> <a href="index.php"> ABOUT</a> </li>
</ul>
</div> <!-- Menuitem closes -->
</div>

したがって、ここでの問題は、menuBar の最小の高さが固定されたままであることです。もう少し小さく見せたい。のパディングを設定してみます#menuBar {padding -5px 0px }。しかし、何も起こりません。

それ、どうやったら出来るの。そして、パディングのコードを完全に削除すると。div の高さが非常に小さくなり、テキストを収容するのに十分な大きさになります。

4

2 に答える 2

1

line-heightまたはheightプロパティを使用して、div に高さを設定します。

于 2012-10-05T19:38:06.237 に答える
0

左をフローティングしてみてから、要素と明示的な値div#menuItem ul liに追加display:blockしてください。aline-height

div#menuItem ul li {
    padding: 0px 20px 0px 20px;
    list-style-type: none;
    display: inline;
    float:left;
}

div#menuItem ul a {
    display: block;
    font-size:14px;
    line-height: 1;
    text-decoration: none;
 }​
于 2012-10-05T19:39:25.243 に答える