没有正确对齐的 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;
}

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

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