导航项无法同行显示求助：列表导航栏布局调试

我来帮你搞定这个导航栏同行显示的问题！你已经做了基础的样式重置，接下来我们针对列表元素调整样式就行，给你两种靠谱的方案：

方法一：使用inline-block布局 #

这种方法兼容性较好，适合需要支持旧浏览器的场景，我们需要处理列表项之间的空白间隙，并设置垂直对齐：

/* 保留你已有的重置样式 */
html,body,ul,li,p{ margin:0px; padding:0px; }
.container{ max-width:100%; margin:0px auto; }
.body-container{ max-width:100%; margin:0px auto; background-image:url(...); }

/* 新增导航栏样式 */
.nav-list {
  list-style: none; /* 去掉默认的列表圆点 */
  padding-left: 0; /* 清除ul默认的左侧内边距 */
  font-size: 0; /* 消除inline-block元素之间的空白间隙 */
}
.nav-list li {
  display: inline-block;
  font-size: 16px; /* 恢复字体大小，可根据需求调整 */
  vertical-align: middle; /* 让所有导航项垂直居中对齐 */
  padding: 10px 15px; /* 可选，增加内边距提升点击体验和美观度 */
}

方法二：使用Flexbox布局（推荐） #

Flex是现代前端布局的首选方案，代码更简洁，无需处理空白间隙，还能轻松实现各种对齐效果：

/* 保留你已有的重置样式 */
html,body,ul,li,p{ margin:0px; padding:0px; }
.container{ max-width:100%; margin:0px auto; }
.body-container{ max-width:100%; margin:0px auto; background-image:url(...); }

/* 新增导航栏样式 */
.nav-list {
  list-style: none;
  padding-left: 0;
  display: flex; /* 将ul设置为flex容器 */
  align-items: center; /* 让导航项垂直居中对齐 */
  gap: 20px; /* 可选，设置导航项之间的固定间距，比空白间隙更可控 */
}
.nav-list li {
  padding: 10px 15px; /* 可选，增加内边距 */
}

补充说明 #

你之前尝试float或inline-block没成功，可能是这些原因：

• 没给ul清除默认的padding-left，导致列表整体偏移且布局混乱
• 使用inline-block时没处理元素间的空白间隙，导致排版异常
• 没设置vertical-align属性，导航项可能出现垂直错位的情况

另外确保你的HTML结构是正确的，比如：

<div class="container">
  <ul class="nav-list">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

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