Position des Navigationsmenüs mit CSS

Entschuldigung, mein Englisch ist nicht sehr gut.Position des Navigationsmenüs mit CSS

body { 
 
    font-size: 16px; 
 
    font-family: heveltica; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
/*Con tenedor de la barra de navegacion*/ 
 
.container_menu { 
 
    height: 100%; 
 
    width: 18rem; 
 
    display: inline-block; 
 
    position: fixed; 
 
    background-color: gray; 
 
} 
 

 
.container_menu .menu { 
 
    width: 100%; 
 
} 
 

 
.container_menu ul { 
 
    list-style-type: none; 
 
} 
 

 
.container_menu .menu li a{ 
 
    color: white; 
 
    display: block; 
 
    padding: 1rem 1.5rem; 
 
    background-color: black; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
 
    <title>MDN - Mockup</title> 
 
</head> 
 
<body> 
 
    <nav class="container_menu"> 
 
    <ul class="menu"> 
 
     <li><a href="#">Teaching Activities</a></li> 
 
     <li><a href="#">Web Literacy</a></li> 
 
     <li><a href="#">Leadership Opportunities</a></li> 
 
     <li><a href="#">Tools</a></li> 
 
     <li><a href="#">Comunity</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <main></main> 
 

 
    <<footer></footer> 
 

 
</body> 
 
</html>

Ich habe ein Problem ein "ul" Element in einem ".container_menu" zu lokalisieren. Es wird angenommen, dass das, was in schwarzer Farbe erscheint, perfekt in das container_menu (graue Farbe) passen sollte, aber es ist etwas außerhalb.

Kann mir jemand helfen?

Quelle

2016-11-22 user3632882

'.menu {padding: 0;}' –

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    font-size: 16px; 
 
    font-family: heveltica; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
/*Con tenedor de la barra de navegacion*/ 
 
.container_menu { 
 
    height: 100%; 
 
    width: 18rem; 
 
    display: inline-block; 
 
    position: fixed; 
 
    background-color: gray; 
 
} 
 

 
.container_menu .menu { 
 
    width: 100%; 
 
} 
 

 
.container_menu ul { 
 
    list-style-type: none; 
 
} 
 

 
.container_menu .menu li a{ 
 
    color: white; 
 
    display: block; 
 
    padding: 1rem 1.5rem; 
 
    background-color: black; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
 
    <title>MDN - Mockup</title> 
 
</head> 
 
<body> 
 
    <nav class="container_menu"> 
 
    <ul class="menu"> 
 
     <li><a href="#">Teaching Activities</a></li> 
 
     <li><a href="#">Web Literacy</a></li> 
 
     <li><a href="#">Leadership Opportunities</a></li> 
 
     <li><a href="#">Tools</a></li> 
 
     <li><a href="#">Comunity</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <main></main> 
 

 
    <<footer></footer> 
 

 
</body> 
 
</html>

Quelle

2016-11-22 02:21:54

UL hat Standard-Padding und Rand, entfernen Sie sie einfach –

Wie Sie gesagt haben, für Ihr Menü in einem grauen Block Montage tun:

.container_menu .menu { 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    background: black; 
}

Wenn Sie nicht schwarz wollen 100% Höhe der grauen Elternteil sein , dann entfernen Sie einfach height: 100% Zeile.

Quelle

2016-11-22 02:35:45 Max

Position des Navigationsmenüs mit CSS

Antwort

Verwandte Themen