2016-11-22 6 views
1

すみません。英語があまり良くありません。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(灰色)に完全に収まるはずですが、外側に少しあります。

誰かが私を助けることができますか?灰色のブロックであなたのメニューを取り付けるための

+0

'.menu {padding:0;} ' –

答えて

2

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>

+0

ULにはデフォルトのパディングとマージンがあります。 –

0

あなたが言ったように、です:

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

あなたは黒、グレー、親の100%の高さにしたくない場合、次にheight: 100%行を削除してください。

関連する問題