如何制作对称Navbar？解决左侧间距过大、左右间距不一致问题

你的Navbar左侧间距过大，核心原因是浏览器默认给<ul>标签设置了padding-left样式，导致左侧额外多出一段空白，和右侧的间距不匹配。

修改后的完整代码 #

HTML（无需调整） #

<nav>
  <ul>
    <li>Tutorials</li>
    <li>News</li>
  </ul>
</nav>

CSS（关键修改部分） #

nav{
  background-color: rgb(255, 86, 86);
  margin: auto;   
  height: 50px;
  padding: 10px;
  width: fit-content;
}

/* 清除ul的默认左侧内边距，解决左侧间距过大问题 */
nav ul{
  padding-left: 0;
  margin: 0; /* 清除ul默认外边距，避免上下出现多余空隙 */
  line-height: 50px; /* 让导航文字垂直居中，和nav高度匹配 */
}

nav li{
  display: inline-block; /* 比inline更灵活，后续调整样式更方便 */
  padding: 0 10px; /* 只设置左右内边距，避免影响导航栏高度 */
}

关键修改说明 #

1. 清除ul默认内边距：给nav ul添加padding-left: 0，直接消除浏览器自带的左侧空白，让Navbar左右两侧间距和nav的padding保持一致。
2. 优化垂直居中：通过line-height: 50px让导航文字和导航栏高度对齐，视觉上更协调。
3. 调整li的显示方式：换成inline-block后，后续如果需要给li添加上下内边距或边框，不会出现布局错乱的问题。

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