Как выровнять элемент списка html справа?

Question

Как выровнять элемент списка html справа?

Рейтинг: 0Ответов: 1Опубликовано: 01.03.2023

Шаблон:

    .Top_menu a{
        display: inline-block;
        font-family: 'Rubik';
        font-size: 14px;
        font-weight: 600;
        color: white;
        text-decoration: none;
    }
    
    .log{
        display: inline-block;
        background-color: #2c2b2e;
        display: block;
        border-radius: 3px;
        color: white;
        border: none;
        text-align: center;
        vertical-align: center;
        font-weight: 600;
        color: white;
        text-decoration: none;
        font-size: 14px;
        width: 68px;
        height: 30px;
        transition: all 0.2s;
        cursor: pointer;
    }
    
    .reg{
        display: inline-block;
        background-color: #9147ff;
        display: block;
        border-radius: 3px;
        color: white;
        border: none;
        text-align: center;
        vertical-align: center;
        font-weight: 600;
        color: white;
        text-decoration: none;
        font-size: 14px;
        width: 110px;
        height: 30px;
        transition: all 0.2s;
        cursor: pointer;
    }
    
    .Logo{
        position: relative;
        z-index: 5;
        display: inline-block;
        vertical-align: middle;
        margin-right: auto;
        margin-top: -60px;
    }
    
    .Logo:hover{
        cursor: pointer;
    }
    
    .Logo, .Top_menu{
        display: inline-block;
        vertical-align: middle;
    }
    
    .Top_menu li{
        display: inline-block;
        vertical-align: middle;
        margin: left;
    }
    
    .Top_menu{
        position: relative;
        z-index: 5;
        left: 0px;
        margin-top: -70px;
    }

    <ul>
        <li><a href="{% url 'logout' %}"><button class="log">Выйти</button></a></li>
        <li><a href="{% url 'acc' %}"><button class="reg">Мой профиль</button></a></li>
        <li><a href="">Чаты</a></li>
        <li><a href="">Создать набор</a></li>
        <li><a href="">Создать предложение</a></li>
    </ul>

На сайте все элементы списка находятся слева, я хочу последние три расположить справа, как это сделать? Пробовал margin-right: 0;, не работает.

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0

Не идеальный конечно результат в том плане, что элементы справа поменяли расположение, но можно список просто поменять наоборот.

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  float: left;
  margin-left: 15px;
}
li:first-child {
  margin-left: 0;
}
li:not(:first-child, :nth-child(2)) {
  float: right;
}
.log, .reg {
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  font-size: 12px;
  text-decoration: none;
}

<ul>
    <li><a class="log" href="{% url 'logout' %}">Выйти</a></li>
    <li><a class="reg" href="{% url 'acc' %}">Мой профиль</a></li>
    <li><a href="">Чаты</a></li>
    <li><a href="">Создать набор</a></li>
    <li><a href="">Создать предложение</a></li>
</ul>

Как выровнять элемент списка html справа?

Ответы