html - 在 flex ul 中右对齐 li

Question

<ul class="uk-subnav uk-subnav-pill tabs-moible-hidden" id="tabs-moible">
        <li class="uk-active">
            <a href="#">Web development </a>
        </li>
        <li>
            <a href="#">Mobile Apps </a>
        </li>

</ul>

这是我的CSS

.uk-subnav-pill {
    margin-top: -47px;
}
.uk-subnav {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    padding: 0;
    list-style: none;
    margin: 30px 10px;
    margin-top: -53px;
}

对于 li 我有

.uk-subnav > * {
    flex: none;
    padding-left: 20px;
    position: relative;
}

现在看起来像这样

标签是 li 标签...我希望它们在右侧对齐

我试着添加

 justify-content: space-between;

to ul ，但它只是将它们散布在...就像将它们对齐在中心 我还尝试将 margin-left: auto 添加到 li 元素，但结果相同

Answer 1

使用 flex-end 将它们向右拉。

.uk-subnav-pill {
    margin-top: -47px;
}
.uk-subnav {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    padding: 0;
    list-style: none;
    margin: 30px 10px;
   justify-content: flex-end;

}
.uk-subnav > * {
    flex: none;
    padding-left: 20px;
    position: relative;
}

<ul class="uk-subnav uk-subnav-pill tabs-moible-hidden" id="tabs-moible">
        <li class="uk-active">
            <a href="#">Web development </a>
        </li>
        <li>
            <a href="#">Mobile Apps </a>
        </li>

</ul>