导航栏未正确居中，左侧的空白区域稍多

Question

我的导航栏没有正确居中，这让我抓狂——左侧的空白区域稍微多一些。非常感谢你。这是代码

HTML：

<div class="navbar">
    <ul class="navitems">
        <li>
            <a class="current" href="index.html">Home</a>
        </li>
        <li>
            <a href="podcasts.html">Podcasts</a>
        </li>
        <li>
            <a href="articles.html">Articles</a>
        </li>
        <li>
            <a href="merch.html">Merch</a>
        </li>
        <li>
            <a href="aboutus.html">About Us</a>
        </li>
    </ul>   
</div>

CSS：

body {
    margin:0
}

.navbar {
    text-align: center;
    border: 1px solid black;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.navitems ul {
    list-style: none;
}
.navitems li {
    display: inline-block;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-right: 3%;
    padding-left: 3%;
    border: 1px solid blue;
    width: 12%;
    font-size: 20px;
}
.navitems a {
    color: black;
    text-decoration: none;
    font-family: georgia;
}
.navitems li:hover a{
    transition: all ease-in-out .5s;
    color: #f88122;
    text-decoration: underline;
}

Answer 1

如果你检查你的代码，你会发现你的选择器在.navitems是错误的你不需要添加ul并且有padding-left对于 ul，因此填充应为零。 祝你好运

body {
    margin:0
    }

    .navbar {
    text-align: center;
    border: 1px solid black;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }
    .navitems { /* Change the css selector */
      list-style: none;
      padding: 0 !important; /* Add this line */
    }
    .navitems li {
    display: inline-block;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-right: 3%;
    padding-left: 3%;
    border: 1px solid blue;
    width: 12%;
    font-size: 20px;
    }
    .navitems a {
    color: black;
    text-decoration: none;
    font-family: georgia;
    }
    .navitems li:hover a{
    transition: all ease-in-out .5s;
    color: #f88122;
    text-decoration: underline;
    }

<div class="navbar">

    <ul class="navitems p-0">
    <li><a class="current" href="index.html">Home</a></li><li><a href="podcasts.html">Podcasts</a></li><li><a href="articles.html">Articles</a></li><li><a href="merch.html">Merch</a></li><li><a href="aboutus.html">About Us</a></li>
    </ul>   
    </div>

Answer 2

1. <ul> 标签具有默认的 padding-inline-start 样式，因此需要重置该值。
2. 要使项目居中对齐，需要在<li> 项目上设置vertical-align: middle。
3. .navitems ul 表示 <ul> 选择器内的 .navitems 选择器。从您的 html 代码中，您应该将其更改为 ul.navitems。

下面是工作的sn-p。

body {
  margin: 0
}

.navbar {
  text-align: center;
  border: 1px solid black;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

ul.navitems {
  list-style: none;
  
  padding-inline-start: 0;
}

.navitems li {
  display: inline-block;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
  padding-right: 3%;
  padding-left: 3%;
  border: 1px solid blue;
  width: 12%;
  font-size: 20px;
  
  vertical-align: middle;
}

.navitems a {
  color: black;
  text-decoration: none;
  font-family: georgia;
}

.navitems li:hover a {
  transition: all ease-in-out .5s;
  color: #f88122;
  text-decoration: underline;
}

<div class="navbar">
  <ul class="navitems">
    <li><a class="current" href="index.html">Home</a></li>
    <li><a href="podcasts.html">Podcasts</a></li>
    <li><a href="articles.html">Articles</a></li>
    <li><a href="merch.html">Merch</a></li>
    <li><a href="aboutus.html">About Us</a></li>
  </ul>
</div>