不需要的水平滚动条

Question

我已尽一切努力删除此滚动条，但没有结果。 基本上在制作完导航栏后，突然出现了一个水平滚动条。我想就是因为这个。代码如下。

HTML：

<nav>
<ul>
<li><a href="home" class="active">Strona Głowna</a></li>
<li><a href="commands">Projekty</a></li>
<li><a href="features">Discord (wkrótce)</a></li>
<li><a href="about">YouTube</a></li>
<li><a href="store">Zespół</a></li>
<li><a href="store">English</a></li>
</ul>
</nav>

CSS：

nav {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
}



nav ul {
    display: flex;
}

nav li {
    list-style: none;
}

nav li a {
 margin:2px;
  text-align: center;
  display: block;
  color: black;
  padding: 14px 16px;
  font-family: 'Lato', sans-serif;
  background:#0986d9;
  font-size:12px;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.active{
  margin:2px;
  text-align: center;
  display: block;
  padding: 14px 16px;
  font-family: 'Lato', sans-serif;
  color:black;
  background:#69d4ff;
  font-size:12px;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
}

nav li a:hover{
  text-align: center;
  border:none;
  background:#11b6f7;
  color:black;

}

只是说类似的问题并没有解决这个问题。最后，您可以附上解决方案的链接，以防我没有测试/看到。

Answer 1

在您的示例中没有显示滚动条。 但是 space-between 不起作用，因为您需要将其添加到要使用它的父元素中。在这种情况下，#nav ul。

针对这种情况，也可以加上 max-width: 100%;导航和/或设置溢出-x：隐藏；

<nav>
<ul>
<li><a href="home" class="active">Strona Głowna</a></li>
<li><a href="commands">Projekty</a></li>
<li><a href="features">Discord (wkrótce)</a></li>
<li><a href="about">YouTube</a></li>
<li><a href="store">Zespół</a></li>
<li><a href="store">English</a></li>
</ul>
</nav>

nav {
    display: flex;
    position: relative;
    align-items: center;
    background-color: #333;
    color: white;
}



nav ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0px 20px;
}


nav li {
    list-style: none;
}

nav li a {
 margin:2px;
  text-align: center;
  display: block;
  color: black;
  padding: 14px 16px;
  font-family: 'Lato', sans-serif;
  background:#0986d9;
  font-size:12px;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.active{
  margin:2px;
  text-align: center;
  display: block;
  padding: 14px 16px;
  font-family: 'Lato', sans-serif;
  color:black;
  background:#69d4ff;
  font-size:12px;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
}

nav li a:hover{
  text-align: center;
  border:none;
  background:#11b6f7;
  color:black;
}

JSFiddle