0

Here is a css

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">


/* styles for navigation */
#nav {
    background-color: #2322ff;
    height: 3em;
    width:70em;
}
#nav ul {
    list-style:none;
    margin: 0 auto;     

} 
#nav ul li {
    font-weight: normal;
        text-transform: uppercase;
    float:left;
}

 #nav ul li a {     
  display: block;   
  padding: .5em;    
  border: 1px solid #ba89a8; 
  border-radius: .5em;  
  margin: .25em; 

}    
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="">House</a></li>
<li><a href="">Baby</a></li>
<li><a href="">More</a></li>
<li><a href="">About</a></li>
</ul>
</div>
<!-- end #content -->
</body>
</html>

It appears as follows enter image description here

where as if the css is following

}
#nav ul {
    list-style:none;
    margin: 0 auto;     
    float:left;
}

then following appears enter image description here I am unable to understand the behavior of float:left in above images. Why in 2nd kind of css it is getting down one by one? where as in first one it is coming properly?

4

3 に答える 3

0

float の通常の動作は、コンテンツ/子の長さに応じてコンテナーのサイズを変更することです。最初のシナリオでは、親が完全な幅を提供できるため、LI は 1 行で表示されます。しかし、2 番目の場合、UL はその子ウィッチの最大幅に従ってサイズ変更されます。したがって、それらは互いの下に表示されます。

于 2013-11-01T19:56:59.430 に答える
0

margin:0 autoとfloat:leftが競合しているようです。ナビゲーションを中央に配置するには、 に配置margin:0 autoし#navます。

編集：フロートの後にクリアすることを忘れていました。

編集：最初にULをフロートしたい理由を尋ねるべきだったかもしれません。

于 2013-11-01T19:48:36.783 に答える
0

わかりました、これが 2 番目のコードの問題です。float:left;最初のケースでは、それを要素に適用するため<li>、それぞれ<li>が左にフロートされます。

2 番目のケースではfloat:left;、要素に適用し<ul>ます。CSS はその仕事を正しく行い、コンテナーを左にフロートさせ、内部の<li>要素を変更しません。したがって、他の方法で行うように指示していないため、通常のように互いの上にスタックします。

ドリップとジョンが問題に気付かなかった理由は、2 番目のケースではスタイルfloat:left;からも削除することを教えてくれなかったからです。<li>将来、使用しているコードを正確に表示するために jsFiddle を作成すると、非常に役立ちます。さらに説明が必要な場合はお知らせください。喜んで説明させていただきます。

于 2013-11-08T16:23:01.723 に答える