在CSS中-如何使导航条在其上延伸'；全长

我想让这个导航栏伸展它的整个长度，这样就没有空白了

您可以在此处看到导航栏的代码：

---

我已经试了一段时间了，但对于这些事情没有明确的答案。。我真的觉得很奇怪，因为任何人都希望在他们的网站上有一个没有空白的导航栏。

菜单容器确实填满了所有的空间。看起来好像没有，因为该网站上的预览容器周围有空间

我把它放在jsbin里，看起来很好。还有一些像素的边缘，这是由于身体的边缘。用以下方法将其删除：

body {
  margin: 0;
}

您需要的css是

width: auto

它正在被使用。在一个实际的网页上，它会传播开来，但在这个平台上，它并没有显示出最有可能的延伸，因为这是开发人员的意图。具体来说，他们的css类“preview container”限制了宽度。

看起来

扩展到包含div（css中带有

#菜单生成器.right

选择器的div）的100%宽度，但该div的填充为

15px 20px

---

如果将其更改为

15px 0px

，并将

的填充减少为0，它将延伸到主窗口的100%。

按照您的措辞，您希望它填充顶部的整个导航，因此，这将更改左侧每个列表项之间的间距，您还可以添加

右侧填充

，以更改每个项目右侧之间的间距量

#cssmenu ul li {
float: left;
display: block;
padding: 0;
padding-left:13%; /* Change this value to fit your screen */
}

---

在“宽度自动”中，只需更改“宽度自动”；宽度为num；其中num是您希望的像素数量 前任。 宽度440px

<div id='cssmenu'>
    <ul>
        <li class='active'><a href='index.html'><span>Home</span></a>
        </li>
        <li><a href='#'><span>Products</span></a>
        </li>
        <li><a href='#'><span>About</span></a>
        </li>
        <li class='last'><a href='#'><span>Contact</span></a>
        </li>
    </ul>
</div>

---

你能试着澄清一下你的意思吗？-把你的问题从列表格式中去掉，因为它不是一个列表？虽然我同意你的观点，但是有4个项目放在一个很长的框中同样会看起来像baddd

width:25%

to#cssmenu ul li？澄清问题，您的意思是希望每个菜单项的宽度都能填满页面的宽度，还是希望删除橙色条周围的空间？