CSS导航菜单的位置
[英]Position of navigation menu with CSS
问题描述
Excuse me my english is not very good. 
请问我的英语不是很好。
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>
I have a problem locating an "ul" element inside a ".container_menu". 我在“ .container_menu”内定位“ ul”元素时遇到问题。 It is assumed that what appears in black color should fit perfectly in the container_menu (gray color), but it is a bit outside. 假定以黑色显示的内容应完全适合container_menu（灰色），但是有点外在。
Could someone help me? 有人可以帮我吗？
2 个解决方案
解决方案1
2 已采纳 2016-11-22 02:21:54
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>
解决方案2
0 2016-11-22 02:35:45
As you said, for fitting your menu in a grey block, do: 如您所说，为了使菜单适合灰色块，请执行以下操作：
.container_menu .menu {
width: 100%;
padding: 0;
margin: 0;
height: 100%;
background: black;
}
If you don't want black to be 100% height of grey parent, then just remove height: 100% line. 如果您不希望黑色成为灰色父级的100％高度，则只需删除height: 100%行即可。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.