如何使菜单栏填充屏幕宽度？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使菜单栏填充屏幕宽度？相关的知识，希望对你有一定的参考价值。
这是我的学校项目：http://sleepybear.ml
我使用<ul>和<li>创建了菜单
我想让菜单的背景颜色填充页面的宽度
我的索引和styles.css：https://codepen.io/anon/pen/bxgmzq
我的css菜单：
ul.menu {
width: 100%;
white-space: nowrap;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
margin-bottom: 40px;
}
和html中的菜单：
<ul class="menu">
<li class="menu"><a href="index.html">HOME</a></li>
<li class="menu"><a href="news.html">NEWS</a></li>
<li class="menu"><a href="#contact">CONTACT</a></li>
<li class="menu"><a href="#forum">FORUM</a></li>
</ul>
答案
只需将margin: 0应用于<body>，如：
ul.menu {
width: 100%;
white-space: nowrap;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
margin-bottom: 40px;
}
body {
margin: 0;
}<body>
<ul class="menu">
<li class="menu"><a href="index.html">HOME</a></li>
<li class="menu"><a href="news.html">NEWS</a></li>
<li class="menu"><a href="#contact">CONTACT</a></li>
<li class="menu"><a href="#forum">FORUM</a></li>
</ul>
</body>以上是关于如何使菜单栏填充屏幕宽度？的主要内容，如果未能解决你的问题，请参考以下文章