首页 文章

列表中心对齐，列表项在d-flex中左移

提问于
浏览 次
0

我正在尝试制作内联列表，它提醒网格具有水平，因为它可以容纳卡片 . 问题是，如果我将列表项浮动到左侧，则文本中心不再起作用，列表本身也保持对齐 .

这是我使用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列表项中的列表居中到左边？任何帮助深表感谢 .

html css twitter-bootstrap flexbox bootstrap-4

2 回答

  • 0

    您的代码中存在一些问题 .

    • 您无法对齐center d-flex ，因为它的宽度与其父级的宽度相同 .

    • ul.justify-content-center 不起作用，因为列表不是 flex . 即使您不需要使用它，因为默认情况下，元素在左侧对齐 .

    • 出于同样的原因，float-left也是不必要的 .

    • 你不遵循boostrap的网格结构：缺少 col-* 元素

    • 您不需要将 d-flex 用于 ul 的父级 .

    如果元素的宽度小于其 d-flex 父元素的宽度，则只能将元素对齐 . 如果是这样，请使用 justify-content-center 作为其父级 .

    解决这个问题的一种方法是

    • 使用 col-* 类作为 ul 的父级

    • 限制 ul 的宽度 .

    • 使用 mx-auto 表示 ul .

    检查这个https://codepen.io/anon/pen/REwmLN我也使用了其他一些方法 .

    回复于
  • 0

    要使整个布局居中，并使最后一行保持对齐，请在列表末尾使用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" 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方式，无论项目数和视口宽度如何，都保持最后一行左对齐 .

    回复于

相关问题