Question

我使用<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>

Answer 1

只需将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>

如何使菜单栏填满屏幕宽度？

1 个答案: