时间戳

首页 > 解决方案 > 没有正确对齐的 inline-flex

html - 没有正确对齐的 inline-flex

问题描述

我有一个包含一些项目的列表，但最后一个项目没有正确对齐。我希望它正确对齐在同一条线上。

在此处输入图像描述

这是我的html代码

<ul class="items-center">
        <li class="inline-flex items-center">
            <img
                    src="~/static/img/products/mktpoint/sm/authentic.svg"
                    alt="100% Authentic"
            />
            {{ $t('header.100%Authentic') }}
        </li>
        <li class="inline-flex items-center">
            <img
                    src="~/static/img/products/mktpoint/sm/return.svg"
                    alt="14 Days Return"
            />
            {{ $t('header.14DaysReturn') }}
        </li>
        <li class="inline-flex items-center">
            <img
                    class="mr-3"
                    src="~/static/img/products/mktpoint/sm/shipping.svg"
                    alt="Free Shipping"
            />
            {{ $t('header.freeShipping') }}
        </li>
        <li class="inline-flex link-black-line items-center">
            <button v-b-modal.modal-marketing>{{ $t('product.showDetails') }}</button>
        </li>
    </ul>

这是我的CSS代码

.inline-flex {
    display: inline-flex;
}

.link-black-line {
    cursor: pointer;
    height: 20px;
    color: #222;
    line-height: 22px;
    border-bottom: 1px solid #222;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

任何帮助表示赞赏

标签： htmlcssvue.jsbootstrap-vue

解决方案

.items-center {
    display: flex;
    align-items: center;
}

如果你想在水平方向等距离放置每个子元素，你可以添加justify-content: space-between

编辑：我的解决方案不适用于 OP。这是对他有用的：flex: 1 1 auto;您可以在评论中找到更多信息。

推荐阅读