如何实现div内<ul>标签的并排对齐

嘿，我来帮你搞定这个列表横向排列的问题！你现在的问题在于，<ul>默认是块级元素（你还手动加了display:block），所以每个列表都会占满整一行，自然没法并排。既然你已经在用Bootstrap 4，咱们直接用它的工具类就能轻松解决，不用写额外的复杂CSS。

核心修改思路 #

给包裹两个<ul>的外层<div>添加Bootstrap的d-flex类——这个类会把容器变成flex布局，里面的子元素默认就会横向排列。另外还有几个小细节要调整：

1. 移除<ul>上的display:block样式，flex布局下不需要这个设置
2. 你的两个<ul>用了同一个id，这不符合HTML规范（id必须唯一），得改成不同的标识
3. 原来的表格宽度设为20px太窄了，改成100%才能看到横向排列的完整效果

修改后的完整代码 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<table style="width:100%;">
  <tr>
    <td id="1">
      <div class='d-flex gap-3'> <!-- 添加d-flex实现横向排列，gap-3控制列表间的间距 -->
        <div class=''>
          <ul id='tog_nr-332' class='list-group list-group-flush'>
            <li class='list-group-item list-group-item-primary'>4421:blabla </li>
            <li class='list-group-item list-group-item-primary'>4421:blabla </li>
            <li class='list-group-item list-group-item-primary'>4421:blabla </li>
            <li class='list-group-item list-group-item-primary'>4421:blabla </li>
          </ul>
        </div>
        <div class=''>
          <ul id='tog_nr-333' class='list-group list-group-flush'> <!-- 修改为唯一id -->
            <li class='list-group-item list-group-item-danger'>4421:blabla </li>
            <li class='list-group-item list-group-item-danger'>4421:blabla </li>
            <li class='list-group-item list-group-item-danger'>4421:blabla </li>
            <li class='list-group-item list-group-item-danger'>4421:blabla </li>
          </ul>
        </div>
      </div>
    </td>
  </tr>
</table>

额外优化选项 #

• 如果想让两个列表平分容器宽度，给每个<ul>添加flex-fill类即可
• 如果需要调整列表的对齐方式（比如垂直居中、两端对齐），可以给外层div加align-items-center或者justify-content-between这类Bootstrap flex工具类

这样修改后，你的两个列表就能完美横向并排显示啦！

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup