0

次のhtmlページを書きました

<!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;
}
#nav ul {
    list-style:none;
    margin: 0 auto;     
        width: 19.5em; 
} 
#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>

出力は次のとおりですここに画像の説明を入力。

セクションに小さな変更を加えました

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

マージンを .25em から .5 em に変更すると、次のように表示されます

ここに画像の説明を入力 約の問題が出てきた場合、マージンを変更するだけで、何がこの動作を引き起こしたのかはっきりしません。どうしてこれが起こるのでしょうか?

以下の提案に従って、幅の列を削除すると変更しようとしました。float:left 列を削除すると、すべてのボックスが垂直になります。

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

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

}

次のようになります ここに画像の説明を入力

なぜこうなった

4

6 に答える 6

0

EM でマージンを 2 倍にすると、全体の幅を超えることになりますnav。また、float:leftCSS で非表示にしています。を取り除き、代わりにそのようfloat:leftにすることをお勧めします。display:inline-block

#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
display: inline-block; 
list-style:none;
margin: 0 auto;     
} 
#nav ul li {
display: inline-block; 
font-weight: normal;
text-transform: uppercase;
}

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

HTML

<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>
于 2013-11-01T15:33:57.093 に答える
0

これ#nav ulは、 width が固定されているためwidth: 19.5emです。

内部要素のwidthまたはpaddingまたはを変更する場合は、 の合計幅を変更する必要があります。marginliul

于 2013-11-01T15:28:51.803 に答える
0

タグにマージンを追加することで、 内の要素の全体的な幅を増やしましたが、それでも 19.5em に制限されています。

から幅の宣言を削除するか、幅を増やすことができます。

于 2013-11-01T15:29:00.827 に答える
0

あなたがしなければならない唯一の変更は、あなたが持っているこのCSSを再度適用することです:

#nav ul {
  display: block; 
  list-style: none;
  text-align: center;
}
#nav ul li {
  display: inline-block; 
  text-transform: uppercase;
}
于 2013-11-01T15:44:02.203 に答える