导航菜单与CSS的位置

对不起，我的英语不太好。导航菜单与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>

我定位在一个 “.container_menu” 的 “UL” 元素的问题。假设以黑色显示的内容应该完全适合container_menu（灰色），但它有点偏外。

有人可以帮助我吗？

来源

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>

来源

2016-11-22 02:21:54

UL有默认的填充和边距，只是删除它们 –

正如你所说，在一个灰色块适合您的菜单中，执行：

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

如果你不想灰父的黑色是100％高度，那么只需删除height: 100%一行即可。

来源

2016-11-22 02:35:45 Max

导航菜单与CSS的位置

回答

相关问题