Angular实现英雄列表居左、反派列表居右布局的问题

你遇到的核心问题是块级元素默认会独占一行，所以即使给两个列表div设了50%宽度，它们还是会上下排列，而text-align只是调整容器内文本的对齐方式，不会改变整个div的位置。下面给你两种简单有效的解决方案：

方法一：使用Flexbox布局（推荐，现代前端首选） #

Flexbox是最直观的布局方式，能轻松实现元素的并排和对齐：

1. 先给两个列表加一个父容器，并设置Flex样式：

/* 父容器样式 */
.list-wrapper {
  display: flex;
  justify-content: space-between; /* 让两个子容器分别靠左右两端 */
}

2. 保留你原来的子容器宽度设置（可选，如果你想让两个列表各占一半空间）：

.listeHeroes {
  width: 50%;
  text-align: left; /* 列表内文本左对齐，按需保留 */
}
.listeVillains {
  width: 50%;
  text-align: right; /* 列表内文本右对齐，按需保留 */
}

3. 修改HTML结构，把两个列表放进父容器：

<div class="list-wrapper">
  <div class="listeHeroes">
    <a *ngFor="let hero of heroes" class="list-group-item list-group-item-action" routerLink="/herodetail/{{hero.id}}">
      {{hero.name}}
    </a>
  </div>
  <div class="listeVillains">
    <a *ngFor="let villain of villains" class="list-group-item list-group-item-action" routerLink="/villaindetail/{{villain.id}}">
      {{villain.name}}
    </a>
  </div>
</div>

这样设置后，两个列表会自动并排，justify-content: space-between会让英雄列表靠左侧，反派列表靠右侧，完美符合你的需求。

方法二：使用Float布局（传统兼容方案） #

如果需要兼容老旧浏览器，可以用浮动布局：

1. 修改子容器的样式，添加浮动属性：

.listeHeroes {
  width: 50%;
  float: left; /* 让英雄列表左浮动 */
  text-align: left;
}
.listeVillains {
  width: 50%;
  float: right; /* 让反派列表右浮动 */
  text-align: right;
}

2. 给父容器添加清除浮动的样式，避免父容器高度塌陷：

.list-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

3. HTML结构和方法一一样，把两个列表放进父容器即可。

两种方法都能实现你要的效果，优先推荐Flexbox，它的布局逻辑更清晰，也更容易维护~

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