如何实现ul元素并排显示？尝试inline-block、float:left后效果杂乱怎么解决

解决方案 #

你当前使用的是Bootstrap框架，优先用框架自带的工具类实现即可，无需写大量自定义CSS，也能避免布局错乱： #

方案1：仅修改HTML类（无需额外写CSS） #

直接在原有HTML结构上添加Bootstrap内置类，核心是开启Flex布局、清除列表默认样式：

<div class="container-fluid gradient">
  <div class="row">
    <div class="col-12 justify-content-start text-white">
      <!-- 给footer加Flex布局相关类 -->
      <div class="footer mt-5 d-flex flex-wrap align-items-start gap-5">
        <img
          src="images/Vector Smart Object (Double Click to Edit).png"
          class="img-fluid footer-logo"
          alt=""
        />
        <div class="left">
          <!-- 清除ul默认样式 -->
          <ul class="mt-5 list-unstyled p-0 m-0">
            <li>TEAM</li>
            <li>COMPETITION</li>
            <li>ABOUT US</li>
            <li>CONTACT</li>
          </ul>
        </div>
        <div class="right">
          <!-- 清除ul默认样式 -->
          <ul class="mt-5 list-unstyled p-0 m-0">
            <li>FAQ</li>
            <li>POLICY PRIVACY</li>
            <li>COOKIES</li>
          </ul>
        </div>
      </div>
      <div class="border-pink"></div>
      <h4 class="mt-4 copy">COPYRIGHT</h4>
    </div>
  </div>
</div>

用到的类说明：

• d-flex：给footer父容器开启Flex布局，子元素默认横向排列
• flex-wrap：移动端空间不足时子元素自动换行，不会出现横向溢出
• align-items-start：两个列表顶部对齐，不会因为条目数量不同出现错位
• gap-5：自动给子元素加横向间距，无需手动写margin
• list-unstyled p-0 m-0：清除ul默认的列表符号、内外边距，这是你之前布局乱的核心原因——默认ul自带左内边距和上下外边距，会打乱对齐规则

方案2：自定义CSS实现 #

如果你不想依赖Bootstrap类，手动写CSS的话可以用以下代码：

/* 第一步先清除列表默认样式 */
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 父容器开启Flex布局 */
.footer {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}

之前布局错乱的常见原因 #

1. 没有清除ul的默认左内边距、列表符号，导致两个列表的起始位置错位
2. 用float方案时没有给父容器清除浮动，导致父元素高度塌陷，后续的版权文字跑到列表旁边
3. 用inline-block方案时没有处理标签之间的空白字符，导致两个列表之间出现不可控的多余间距

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