如何制作一个不拉伸整个页面的水平居中导航栏？

Question

我一直想制作一个不会拉伸整个页面的水平导航栏。最终遵循了有关如何制作与我的想法非常相似的导航栏的教程（https://cssdeck.com/blog/super-simple-horizontal-navigation-bar/），唯一的问题是它不居中，并且背景的宽度与整个页面匹配，这是我不想要的。我上传了一张草图图像，展示了我希望导航栏如何显示。

网站上的代码如下：

HTML

<ul id="nav">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Products</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
</ul>

CSS

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; }
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li a:hover {
    color: #c00;
    background-color: #fff; }

我尝试创建一个封装无序列表的 div，使其宽度为页面的 40%，使用 margin-left: auto 和 margin-right: auto 将其居中。然后我将每个列表项指定为父元素（即 div，因为我没有指定无序列表元素本身的宽度）的 25%，因为我希望 4 个列表项位于导航栏上 (100/4 = 25）。所以，我希望通过对网上找到的教程代码进行一些修改，我可以学习如何修改自己的代码。

真的希望有人能帮助我，先谢谢了！

Answer 1

我做了一些 CSS 更改，这将解决您的问题：

#nav {
  width: auto;
  margin: auto;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border: 1px solid #ccc; 
  display: table;
  }
#nav li {
  float: left; }
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #ccc; }
#nav li a:hover {
  color: #c00;
  background-color: #fff; }
#nav li:last-child a{border: none;}

<ul id="nav">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Products</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
    </ul>