如何使用CSS将两个无序列表并排显示？

嘿，我发现你遇到的问题根源首先在HTML结构错误上，你把<ul>标签放到了<p>标签里面，但根据HTML规范，<p>元素不能包含像<ul>这样的块级元素，浏览器会自动把<p>提前闭合，导致你的列表结构完全不符合预期，这也是你用float或display: inline-block没效果的核心原因之一。

先给你修正后的HTML结构，然后再用几种不同的CSS方案实现并排：

修正后的基础HTML #

<div class="container">
  <h3>Note template</h3>
  <div class="lists-wrapper">
    <ul class="list-item">
      <li>Name: </li>
      <li>Account#: </li>
      <li>Meter: </li>
      <li>Phone: </li>
      <li>Issue: </li>
      <li>Resolution: </li>
      <li>KB: None</li>
    </ul>

    <h3>Note Template(Other)</h3>
    <ul class="list-item">
      <li>Name: </li>
      <li>Primary Contact: </li>
      <li>Account#: </li>
      <li>Meter: </li>
      <li>Phone: </li>
      <li>Primary Phone#: </li>
      <li>Issue: </li>
      <li>Resolution: </li>
      <li>KB: None</li>
    </ul>
  </div>
</div>

方案1：用Flex布局（最推荐，现代浏览器都支持） #

这是最简单且易维护的方式，给包裹列表的容器加display: flex即可，还能轻松控制间距和对齐方式：

.lists-wrapper {
  display: flex;
  gap: 2rem; /* 两个列表之间的间距，可自定义 */
}

.list-item {
  flex: 1; /* 让两个列表平分容器宽度，也可以设置固定宽度比如width: 45% */
  list-style: none; /* 可选，去掉默认列表圆点 */
  padding: 0;
}

方案2：用display: inline-block #

如果要兼容老浏览器可以用这个，但要注意去掉列表之间的空白字符（或者用font-size:0技巧），还要给ul设置宽度：

.lists-wrapper {
  font-size: 0; /* 去掉inline-block元素间的空白间隙 */
}

.list-item {
  display: inline-block;
  width: 45%; /* 自定义宽度，留间隙 */
  font-size: 16px; /* 恢复字体大小 */
  list-style: none;
  padding: 0;
  margin-right: 5%; /* 右边的间隙 */
}

.list-item:last-child {
  margin-right: 0; /* 最后一个列表去掉右边距 */
}

方案3：用Float布局 #

这个是比较传统的方式，注意要给父容器清除浮动，避免高度塌陷：

.lists-wrapper::after {
  content: "";
  display: table;
  clear: both; /* 清除浮动 */
}

.list-item {
  float: left;
  width: 45%;
  list-style: none;
  padding: 0;
  margin-right: 5%;
}

.list-item:last-child {
  margin-right: 0;
}

你可以根据自己的需求选其中一种方案，先把HTML结构修正，再加对应的CSS，就能实现两个列表并排的效果啦～

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