中间的导航栏元素中的空格不相等。 CSS似乎还允许文本与其他元素重叠，例如，如果我写“homeabcdefgh”，它将与下一个元素重叠，而不是均匀地间隔出来。
null
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #b7b7b7;
}
body {
background-color: black;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background-color: #332323;
}
.logo {
cursor: pointer;
color: white;
font-size: large;
}
.nav_links a {
display: inline-block;
width: 20%;
padding-left: 3%;
padding-right: 10%;
cursor: pointer;
border-left: 1px solid white;
margin-right: 30px;
text-transform: uppercase;
list-style-type: none;
}
li {
min-width: 80px;
}
.button {
background-color: #302b2b;
padding: 5px 10%;
color: white;
}<header>
<h4 class="logo">N</h4>
<nav class='nav1'>
<ul class='nav_links'>
<a>
<li href="#home">Home</li>
</a>
<a>
<li href="#dresses">Dresses</li>
</a>
<a>
<li href="#trends">Trends</li>
</a>
</ul>
</nav>
<a href="#"><button class="button">Contact</button></a>
</header>null
您可以在ul display:flex之间设置空格
ul {
display: flex;
justify-content: space-between;
align-items: center;
}
null
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #b7b7b7;
}
body {
background-color: black;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background-color: #332323;
}
.logo {
cursor: pointer;
color: white;
font-size: large;
}
.nav_links a {
width: auto;
cursor: pointer;
border-left: 1px solid white;
text-transform: uppercase;
list-style-type: none;
padding-left: 15px;
padding-right: 15px;
}
ul {
display: flex;
justify-content: space-between;
align-items: center;
}
.button {
background-color: #302b2b;
padding: 5px 10%;
color: white;
}<header>
<h4 class="logo">N</h4>
<nav class='nav1'>
<ul class='nav_links'>
<a>
<li href="#home">Home</li>
</a>
<a>
<li href="#dresses">Dresses</li>
</a>
<a>
<li href="#trends">Trends</li>
</a>
</ul>
</nav>
<a href="#"><button class="button">Contact</button></a>
</header>
您需要给Nav一些宽度，然后在nav_links上使用flex box。 我删除了你所有的填充锚宽度和边距
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #b7b7b7;
}
body {
background-color: black;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background-color: #332323;
}
.logo {
cursor: pointer;
color: white;
font-size: large;
}
/** Give the nav a width */
.nav1{
width:20%;
}
/** Set the flex properties */
.nav_links{
display: flex;
justify-content: space-between;
}
.nav_links a {
display: inline-block;
cursor: pointer;
text-transform: uppercase;
list-style-type: none;
}
.button {
background-color: #302b2b;
padding: 5px 10%;
color: white;
}
您可以在导航上使用内部flexbox。 另外，您在元素上有hrefs，这是不需要的。 您可以直接向添加链接，它将根据需要对齐链接，因为它本身也在flexbox内，间隔均匀。
null
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #b7b7b7;
}
body {
background-color: black;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background-color: #332323;
}
.logo {
cursor: pointer;
color: white;
font-size: large;
}
nav {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
}
nav a {
text-align: center;
cursor: pointer;
border-left: 1px solid white;
text-transform: uppercase;
text-decoration: none;
padding: 0.25rem 0.5rem;
}
.button {
background-color: #302b2b;
padding: 5px 10%;
color: white;
}<header>
<h4 class="logo">N</h4>
<nav class='nav1'>
<a href="#home">Home</a>
<a href="#dresses">Dresses</a>
<a href="#trends">Trends</a>
</nav>
<a href="#"><button class="button">Contact</button></a>
</header>