当列表项在 d-flex 中向左浮动时对齐列表中心

Posted 2023-03-17

【中文标题】当列表项在 d-flex 中向左浮动时对齐列表中心

【英文标题】：Align list center while list items are floated left in d-flex

【发布时间】：2019-05-11 02:49:46

【问题描述】：

我正在尝试制作内联列表，该列表提醒网格水平方向尽可能多的卡片。问题是，如果我将列表项浮动到左侧，则文本中心不再起作用，并且列表本身是左对齐的。

这是我正在使用 ajax .load() 加载到列表项中的卡片

<div class="my-card" style="width: 268px;">
    <a href="" class="card-text">
        <img class="card-img-top" src="http://placehold.it/268x280" >
        <div class="card-body py-3 px-0">
            <div>Dolor labore duis eu eu qui officia aliqua minim.</div>
        </div>
    </a>
</div>

<div class="container-fluid">
        <div class="row">
            <div class="d-flex text-center">
                <ul class="list-inline">
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                </ul>
            </div>
        </div>
    </div>

这是一样的，但最后一项不是向左浮动，而是列表居中：

<div class="container-fluid">
        <div class="row">
            <div class="d-flex">
                <ul class="list-inline text-center pl-3 justify-content-start">
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                </ul>
            </div>
        </div>
    </div>

所以问题是如何在 d-flex 中将列表居中并将列表项浮动到左侧？非常感谢任何帮助。

【问题讨论】：

请展示你的css（你使用引导程序吗？）

@לבנימלכה 很抱歉，我的标签完全错误。是的，我正在使用引导程序 4。唯一的 css 在卡内，它是固定的卡宽度。

你试过在容器元素上添加justify-content-start类吗？

@jom 是的，我也试过了。结果是一样的。

【参考方案1】：

要使整个布局居中并保持最后一行左对齐，请在列表末尾使用 4 个空的间隔元素。在这种情况下，您需要正好 4 个垫片，因为您在一行中的最大值是 5....

另外，请确保您使用的是 flexbox，而不是浮动。

<div class="container-fluid">
    <ul class="row list-unstyled mx-auto text-center justify-content-center">
        <li class="col-auto">
            <div class="my-card" style="width: 268px;">
                <a href="" class="card-text">
                    <img class="card-img-top" src="http://placehold.it/268x280" >
                    <div class="card-body py-3 px-0">
                        <div>Dolor labore duis eu eu qui officia aliqua minim.</div>
                    </div>
                </a>
            </div>
        </li>
        ... (more cards)

        <!-- 4 empty spacers at end for left justify cards on all viewports -->
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
    </ul>
</div>

https://www.codeply.com/go/jPsNgz6Co8

AFAIK 是唯一 flexbox 使整个布局居中的方法，并且无论项目数量和视口宽度如何，都保持最后一行左对齐。