ULの不要なマージン

ulに余白があるのはなぜですか？左右に浮動すると、ヘッダーがヘッダーのすぐ下に出て行きます。もし私がそれを落としてもそれを落とさないでください。私はそれを理解していません。どうすれば修正できますか？それは＃を中心に、それにmargin: autoを持っているあなたのコンテナ、内部にあるようULの不要なマージン

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div id="container"> 
     <div id="header"> 
      <div class="navbar"> 
       <ul> 
       <li><a href="#"></a>NAV1</li> 
       <li><a href="#"></a>NAV2</li> 
       <li><a href="#"></a>NAV3</li> 
       </ul> 
      </div> 
     </div> 

    </div> 

</body> 
</html>

CSS

html{ 
    height:100%; 
} 
body{ 
    height:100%; 
    width:100%; 
    background-color: grey; 
    margin:0; 
    padding:0; 
} 
#container{ 
    width:80%; 
    margin:auto; 
} 
#header{ 
    width:100%; 
} 
.navbar{ 
    width:100%; 

} 
ul{ 
    margin:0; 
    padding:0; 
    width:25%; 
    float:left 
} 
li{ 
    display:inline; 
}

出典

2017-05-26 jonmo1990

ULがそれに国境入れ#container – tourdefran

から継承されているだけ余裕！これを使ってもう少し質問を説明することができます：https://jsfiddle.net/sheriffderek/0mban3xr/ – sheriffderek

ULには余裕がありませんが、それだけでそのように表示されますあなたのページには80％の幅を持っています。

あなたはそれが体の左側、または使用にフロートしたい場合は、コンテナの外であなたのNAVを移動

：

position: absolute; 
left: 0; 
width: 100%;

の代わりに、それを浮動し、それが最も近い相対コンテナの左側に移動します。（この場合は何ものように体をposition: relativeに設定されている

EDIT：また、あなたのリンクが正しく構成されていません。

<li><a href="#"></a>NAV1</li>

NAV1をリンクのテキストにしたい場合は、<li><a href="#">NAV1</a></li>にする必要があります。

出典

2017-05-26 23:06:27

"最も近い相対コンテナ（この場合はボディ..." =>このケースでは[Initial Containingブロック]（https://www.w3.org/TR/CSS22/visudet.html#x1）は本体から2つの容器です – Alohci

余白がないため、ulのスペースが不足しています。何を達成したいのかわからないけど、ulからwidth: 25%;を取り除くことができます。

出典

2017-05-26 23:21:11 LXhelili

なぜulのスペースが足りないのですか？コンテナ、ヘッダー、およびnavbar divは、liセレクターの周りをラップしてから、左または右に浮かべます。 – jonmo1990

このようにお試しください。

html{ 
 
    height:100%; 
 
} 
 
body{ 
 
    height:100%; 
 
    width:100%; 
 
    background-color: grey; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#container{ 
 
    width:80%; 
 
    margin:auto; 
 
} 
 
#header{ 
 
    width:100%; 
 
} 
 
.navbar{ 
 
    width:100%; 
 
    overflow: auto; 
 
} 
 
ul{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    float:left; 
 
} 
 
li{ 
 
    display:inline; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
    <div id="container"> 
 
     <div id="header"> 
 
      <div class="navbar"> 
 
       <ul> 
 
       <li><a href="#"></a>NAV1</li> 
 
       <li><a href="#"></a>NAV2</li> 
 
       <li><a href="#"></a>NAV3</li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 

 
</body> 
 
</html>

出典

2017-05-26 23:40:28 LXhelili

答えて

関連する問題