html - CSS 多列布局 : <li> cut in half when uneven amount of users online

Question

所以我正在尝试一个新的聊天室，我想将用户列表显示为两列。当房间里有两个人时 <li>很好地分布在两列中。但是，当 li 的数量不均匀时，我会遇到以下问题。谁能看看我的代码，看看我做错了什么？

编辑:我删除了 column-fill: balance，但仍然没有。

SCSS代码

.first-main-column {
    .first-column-window {
      height: 700px;
      background-color: #ffffff;
      .user-container {
        height: 350px;
        width: 100%;
        overflow: auto;
        columns: 2;
        column-gap: 1em;
        column-rule: thin solid black;
        h2 {
          font-family: "Bebas Neue";
          column-span: all
        }
        .list {
          column-fill: balance;
          ul {
            li {
              width: 80%;
              border-radius: 5px;
              margin: 0 auto;
            }
          }
        }
      }

      .btn-container{
        width: 100%;
        height: 350px;
        button {
          margin: 5% 0;
          padding: 5%;
        }
      }
    }
  }

HTML代码

<div class="col-md-4 first-main-column">
        <div class="first-column-window w-80">
            <div class="user-container">
                <h2 class="p-2">User List</h2>
                <div class="list">
                    <ul class="list-group">
                        <li class="list-group-item my-2" *ngFor="let user of userList">
                            {{user}}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="btn-container ">
                <button class="btn btn-block btn-lg btn-primary" (click)="joinRoom('general', chatWindow)">General Chat</button>
                <!-- House chat should be different with each house-->
                <button class="btn btn-block btn-lg btn-warning" (click)="joinRoom('house', chatWindow)">House Chat</button>
                <button class="btn btn-block btn-lg btn-danger" (click)="joinRoom('country', chatWindow)">Country Chat</button>
            </div>
        </div>
    </div>

Answer 1

添加

display: inline-block;

你的风格。

.list {
    column-fill: balance;
    ul {
        li {
            width: 80%;
            border-radius: 5px;
            margin: 0 auto;
            display: inline-block;
        }
    }
}