如何实现HTML中多个<ul>无序列表水平并排显示

开发者阿泽

2026-8-27

问题根源

块级元素默认独占一行，你写的两个列表分别放在两个独立的<div>里，自然会上下堆叠。另外你的代码存在几个明显错误，直接导致你加的类名完全不生效：

你把col-md-4这类栅格类写在了空的<i>标签上，没有加在包裹列表的外层容器上
类名里混入了CSS选择器语法，.col-md-offset-0里的开头点是CSS选类用的，写在HTML的class属性里必须删掉
第二个列表的外层<div>没有写闭合标签
<ul>标签内部直接套<i>不符合HTML规范，斜体效果应该用CSS控制，不要直接在列表里套无关标签

实现方法

优先用CSS Flex布局实现，不需要依赖任何第三方框架，适配性更好，写法也简单。
第一步，先修正HTML结构，给两个列表板块加一个共同的父容器，修正标签嵌套和闭合错误：

<!-- 两个板块的共同父容器 -->
<div class="content-wrap">
  <!-- Resume Skills -->
  <div class="content-block">
    <i class="fa-solid fa-gears"></i>           
    <p><br><i><b>Job Skills</b><br></i></p>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
      <li>Seven</li>
    </ul>
  </div>     
  <!-- Areas of Interest -->
  <div class="content-block">
    <i class="fa-brands fa-hubspot"></i>            
    <p><br><i><b>Areas of Interests</b><br></i></p>
    <ul>
      <li>Carpentry</li>
      <li>Welding</li>
      <li>Electrical</li>
      <li>General Contracting</li>
      <li>Management</li>
      <li>Logistical Support</li>
      <li>Accounting</li>
    </ul>
  </div>
</div>

第二步，添加对应CSS样式，写在页面的<style>标签或者独立CSS文件中即可：

/* 父容器开启弹性布局，子元素自动并排 */
.content-wrap {
  display: flex;
  gap: 60px; /* 控制两个列表之间的间距，按需调整数值 */
  flex-wrap: wrap; /* 小屏幕宽度不足时自动换行，避免内容挤压变形 */
}

/* 每个列表板块分配等宽宽度 */
.content-block {
  flex: 1;
  min-width: 260px; /* 宽度小于该值时自动换行 */
}

/* 统一给列表加斜体效果，替换之前错误嵌套的i标签 */
.content-block ul {
  font-style: italic;
  padding-left: 22px;
}

如果你坚持要用Bootstrap栅格实现，必须满足两个前提：一是提前引入Bootstrap的CSS资源，二是栅格类必须加在正确的容器上，参考结构如下：

<!-- 栅格必须放在row容器内 -->
<div class="row">
  <!-- Resume Skills 栅格类加在板块最外层div -->
  <div class="col-md-4 col-md-offset-0">
    <i class="fa-solid fa-gears"></i>           
    <p><br><i><b>Job Skills</b><br></i></p>
    <ul>
      <!-- 列表内容不变 -->
    </ul>
  </div>
  <!-- Areas of Interest -->
  <div class="col-md-4">
    <i class="fa-brands fa-hubspot"></i>            
    <p><br><i><b>Areas of Interests</b><br></i></p>
    <ul>
      <!-- 列表内容不变 -->
    </ul>
  </div>
</div>

提示：原生开发优先选Flex方案，不需要加载额外资源，也不会出现类名写错、没引入框架导致的失效问题。

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