没有正确对齐 inline-flex

Question

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

这是我的 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;
}

感谢任何帮助

Answer 1

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

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

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

没有正确对齐 inline-flex

No aligned properly inline-flex

html

css

vue.js

bootstrap-vue