如何实现导航栏（Navbar）的均匀间距并适配不同屏幕？

我的HTML代码 #

<div class="header">
  <div class="container">
      <h1 class="logo"></h1>
      <div class="nav">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="history.html">History</a></li>
          <li><a href="eat.html">Where to Eat</a></li>
          <li><a href="visit.html">Places to visit</a></li>
          <li><a href="nature.html">Beauties of Nature</a></li>
          <li><a href="nature.html">How to navigate Seoul</a></li>
        </ul>
      </div>
    </div>
</div>

我的CSS代码 #

.container {
width: 80%;
margin: 0 auto;
}

.header {
background: #293380;
}

.header::after {
content: '';
display: table;
clear: both;
}

.logo {
float: left;
padding: 10px 0;
}

.nav {
float: right;
}

.nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style: none;
}

.nav li {
flex: 1;
display: inline-block;
margin-left: 70px;
padding-top: 23px;

position: relative;
}

.nav a {
color: #F0EFF7;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}

.nav a:hover {
color: #953D60;
}

.nav a::before {
content: '';
display: block;
height: 5px;
background-color: #F7D9F1;

position: absolute;
top: 0;
width: 0%;
}

解决方案 #

你当前的问题在于同时混用了float和flex布局，且给

1. 重构容器布局，用flex替代float，提升布局稳定性：

   • 给.container添加display: flex; justify-content: space-between; align-items: center;，让logo和导航栏分别靠左右排列且垂直居中。
   • 删掉.logo的float: left和.nav的float: right。

2. 调整

3. 的间距控制逻辑：
   • 删掉.nav li里的flex:1和display: inline-block，避免文字长度不同时的不协调问题。
   • 给.nav ul添加gap: 30px; flex-wrap: wrap;，gap直接控制
   • 间的均匀间距，flex-wrap让小屏幕下导航项自动换行，防止溢出。
   • 删掉.nav li的margin-left:70px，改用gap统一控制间距更可靠。

修改后的CSS代码：

.container {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.header {
background: #293380;
padding: 0 10px; /* 小屏幕避免内容贴边 */
}

/* flex布局无需clearfix，可删除原.header::after代码 */

.logo {
padding: 10px 0;
}

.nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style: none;
gap: 30px; /* 可根据需求调整间距大小 */
flex-wrap: wrap;
}

.nav li {
padding: 23px 0; /* 上下padding一致，保证导航项高度统一 */
position: relative;
}

.nav a {
color: #F0EFF7;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}

.nav a:hover {
color: #953D60;
}

.nav a::before {
content: '';
display: block;
height: 5px;
background-color: #F7D9F1;
position: absolute;
top: 0;
width: 0%;
transition: width 0.3s ease; /* 可选：给下划线添加过渡动画 */
}

.nav a:hover::before {
width: 100%; /* 鼠标悬停时下划线展开 */
}

修改后，导航栏的

内容的提问来源于stack exchange，提问作者Jeho CHO