我正在尝试制作内联列表,它提醒网格水平放置尽可能多的卡片。问题是,如果我将列表项向左浮动,文本中心将不再有效,列表本身将左对齐。
这是我使用 ajax .load()
加载到列表项中的卡片
<div class="my-card" style="width: 268px;">
<a href="" class="card-text">
<img class="card-img-top" src="http://placehold.it/268x280" alt="">
<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 中的列表居中并将列表项 float 到左侧?非常感谢任何帮助。
最佳答案
要使整个布局居中,并保持最后一行左对齐,请在列表末尾使用 4 个空的间隔元素。在这种情况下,您正好需要 4 个垫片,因为一行中最多有 5 个垫片....
此外,请确保您使用的是 flexbox,而不是 float 。
<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" alt="">
<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 居中整个布局并保持最后一行左对齐的方式,无论元素数量和视口(viewport)宽度如何。
关于html - 对齐列表中心,而列表项在 d-flex 中向左浮动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53701682/