0

男性練習中です

myIndex.html:

<html>
<head>
<link rel="stylesheet" type="text/css" href="myMenu.css"> 
</head>
<body>
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">5 columns</a></li>
<li><a href="">4 columns</a></li>
<li><a href="">3 columns</a></li>
<li><a href="">1 column</a></li>
</ul>
</body>
</html>

myMenu.css

#menu {
    list-style:none;
    width:940px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

    border: 1px solid #002232;
}
#menu li {
    float: left;
    display: block;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
}
#menu li a {
    display: block;
    text-decoration:none;
}

ここで、height:43px が #menu から削除された場合、ラッピング コンテナーの形状 (つまり、4 つの角が丸い境界線) がなく、上部の 1 つの境界線が表示されます。なぜそのような振る舞いなのかわかりませんか？Ul は、li やゼロでない高さの a など、その中の要素を既に知っているのに、なぜそれらをラップできないのでしょうか?

事前にご説明いただきありがとうございます。

4

3 に答える 3

0

作業フィドル: http://jsfiddle.net/UsheC/

フロートは、通常のドキュメント フローから要素を削除します。
このため、コンテナー要素の高さを計算するときに、浮動要素の高さは考慮されません。

コンテナ要素の後に div をクリアすることで、この動作を克服できます。

<ul id="menu" class="clearFix">
    <li><a href="">Home</a></li>
    <li><a href="">5 columns</a></li>
    <li><a href="">4 columns</a></li>
    <li><a href="">3 columns</a></li>
    <li><a href="">1 column</a></li>
</ul>

/\

.clearFix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
于 2013-04-13T06:19:24.937 に答える
0

代わりにこれを使用してくださいheight in #menu 

display:block;
overflow:hidden;

からパディングを削除しliてそれらheightをline-height与えますが、必要に応じてまたはaからのリンクにパディングを与え 、その作業は正常に行われますleftright

于 2013-04-13T06:20:19.920 に答える
0

高さの宣言を削除した後、 cssに追加display:inline-blockする必要があります。#menu {...}

#menu {
  list-style:none;
  width:940px;
  margin:30px auto 0px auto;
  padding:0px 20px 0px 20px;   
  display:inline-block;     /* add this line */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #014464;
  background: -moz-linear-gradient(top, #0272a7, #013953);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
  border: 1px solid #002232;
}

結果を表示する jsbin は次のとおりです: http://jsbin.com/iwomuw/1/edit。

使用したくない場合display:inline-block。もう 1 つの方法は、要素をタグで展開overflow:autoさせる whichを使用することです。ulli

于 2013-04-13T06:12:55.733 に答える