выравнивание по правому краю

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;

к ul, но он просто распределяет их в с ... как выровнять их по центру, я также пытался добавить margin-left: auto к li элементу, но закончил с тем же результатом

Answer 1

используйте гибкий конец, чтобы тянуть их вправо.

.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>

Answer 2

Метод 1: Вы можете использовать float и установить его для себя .uk-subnav-pill:

.uk-subnav-pill {
    margin-top: 0px; /* changed */
    float:right
}
.uk-subnav {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    padding: 0;
    list-style: none;
    margin: 30px 10px;
    margin-top: 0px; /* changed */
}
.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>

Метод 2: Вы можете использовать направление и установить его в rtl (справа налево): Вы можете использовать float и установить его впрямо для вас .uk-subnav-pill:

.uk-subnav-pill {
    margin-top: 0px; /* changed */
    direction: rtl;
}
.uk-subnav {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    padding: 0;
    list-style: none;
    margin: 30px 10px;
    margin-top: 0px; /* changed */
}
.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>