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

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

下面是有效的代码段。

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>

Answer 2

如果您检查代码，则会发现.navitems中的选择器错误，无需添加 ul ，并且有左填充 ul 的“ strong”，因此填充应为零。祝你好运

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>

导航栏未正确居中，左侧左侧留有更多空白

2 个答案: