Unerwünschter Rand in UL

Warum gibt es einen Rand in der UL? Die Navbar geht direkt unter und aus dem Header, wenn ich nach links oder rechts schwebe. Wenn ich Ul entferne, fällt es nicht unter. Ich verstehe es nicht. Wie repariere ich es?Unerwünschter Rand in 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; 
}

Quelle

2017-05-26 jonmo1990

die einzige Marge, die der ul aus der #container – tourdefran

Put eine Grenze auf sie geerbt hat! Sie können dies verwenden, um Ihre Frage ein wenig genauer zu erklären: https://jsfiddle.net/sheriffderek/mban3xr/ – sheriffderek

Es gibt keine Marge auf dem UL ist, wie es scheint nur so, wie es in Ihrem Behälter ist, die margin: auto drauf hat, die die # Zentren Containerelement auf Ihrer Seite und hat eine Breite von 80%.

außerhalb des Behälters Bewegen Sie nav, wenn Sie es auf der linken Seite des Körpers schweben wollen, oder -nutzung:

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

anstatt es von Schwimm- und es wird auf der linken Seite des nächsten Verwandten Container gehen (in diesem Fall der Körper als nichts wird mit position: relative

EDIT:. Außerdem sind Ihre Links nicht richtig strukturiert:

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

Sollte sein: <li><a href="#">NAV1</a></li> Wenn Sie möchten, NAV1 der Text des Links zu sein

Quelle

2017-05-26 23:06:27

"nächster relativer Container (in diesem Fall der Körper ..." => in diesem Fall der [Initial Containing Block] (https://www.w3.org/TR/CSS22/visudet.html#x1) Das sind ein paar Container vom Körper entfernt – Alohci

Es geht nicht um Marge, weil es keine Marge gibt, gibt es nicht genug Platz von ul. Ich bin mir nicht sicher, was Sie erreichen möchten, aber Sie können von ul entfernen.

Quelle

2017-05-26 23:21:11 LXhelili

Warum gibt es nicht genug Platz von ul? Ich versuche zu haben Die divs container, header und navbar winden sich um den li selector und schweben dann nach links oder rechts. – jonmo1990

Versuchen Sie diesen Weg.

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>

Quelle

2017-05-26 23:40:28 LXhelili

Unerwünschter Rand in UL

Antwort

Verwandte Themen