HTML/CSS响应式布局问题：768px+屏幕实现列表左右分布

直接用Flexbox就能搞定这个布局，比float或者inline-block更省心，还能避免很多兼容性问题。给你改好的代码，关键部分我标出来了：

修改后的HTML #

<div class="nav-container">
  <!-- 导航列表 -->
  <ul class="main-nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
  </ul>
  <!-- 社交图标列表 -->
  <ul class="social-nav">
    <li><a href="#"><i class="icon-weibo"></i></a></li>
    <li><a href="#"><i class="icon-wechat"></i></a></li>
    <li><a href="#"><i class="icon-github"></i></a></li>
  </ul>
</div>

修改后的CSS #

/* 重置列表默认样式，避免浏览器自带的margin/padding干扰布局 */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 父容器默认垂直排列（移动端） */
.nav-container {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 移动端两个列表之间的间距 */
  padding: 0 1rem;
}

/* 让列表项横向排列 */
.main-nav li, .social-nav li {
  display: inline-block;
  margin-right: 1rem;
}

/* 去掉最后一项的右边距，避免多余空白 */
.main-nav li:last-child, .social-nav li:last-child {
  margin-right: 0;
}

/* 桌面端（768px以上）布局调整 */
@media (min-width: 768px) {
  .nav-container {
    flex-direction: row;
    justify-content: space-between; /* 直接实现导航左、社交图标右对齐 */
    align-items: center; /* 让两个列表垂直居中对齐 */
  }
}

关键说明 #

1. 用flex-direction: column实现移动端上下排列，桌面端切换为row并配合justify-content: space-between，一键完成左右对齐，不用手动调整float或inline-block的间距问题。
2. 重置列表默认样式是核心细节——很多新手忽略浏览器给ul加的默认margin和padding，这往往是布局错位的根源。
3. 如果你之前用float没成功，大概率是没处理父容器高度塌陷，或者元素宽度设置不合理，Flexbox完全不用考虑这些麻烦事。

如果你的社交图标是字体图标或图片，直接替换代码里的<i>标签内容即可，不影响布局效果。

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