时间戳

首页 > 解决方案 > 想要将此 div 分成三个相等的列，以便列表数据看起来像 3 个表

html - 想要将此 div 分成三个相等的列，以便列表数据看起来像 3 个表

问题描述

我正在打印一个以可观察格式出现的列表数据。我希望将屏幕分成 3 个相似的列，所以它看起来像一张桌子。但是每个单元格不占用相同的长度，因此它没有正确对齐。

 <div class="card">
                    <div class="card-header main-header">
                        <h3 style="text-align: center;font-weight: 600;">Roles</h3>
                    </div>
                    <div class="card-header">
                        <span class="list-column">RoleName</span>

                        <span class="list-column">Description</span>

                        <span class="list-column">Action</span>
                    </div>
                    <ul class="list-group">
                        <li *ngFor="let item of userRoles; let i = index">
                            <span class="list-item">{{item.roleName}}</span>
                            <span class="list-item">{{item.roleDesc}}</span>
                            <span class="list-item">
                                <!-- <i class='fas fa-edit' style='font-size:24px'></i> -->
                                <a href="">Edit</a> /
                                <a href="">Delete</a> /

                            </span>
                        </li>
                        <br />
                    </ul>
                </div>

风格。

ul {
  list-style-type: none;
  padding-top: 20px;
}
.list-column {
  font-size: 15px;
  margin: 140px;
}

.list-item {
  font-size: 12px;
  margin: 140px;
  align-items: center;
}


.wrapper {
  width: 100%;
  font-size: 0;
}

标签： htmlcssangular

解决方案

如果您想创建一个类似表格的容器，我建议使用以下样式：

.card{
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
}

这会将卡片子元素分成相同大小的 3 个组。

lET 第一列的宽度是整个宽度的 50%，您可以这样做：

  grid-template-columns: 2fr 1fr 1fr;

推荐阅读