Home / Questions / 21529
Accepted
Otto
Asked: 2020-08-25 05:54:54 +0800 CST 2020-08-25 05:54:54 +0800 CST

перемещать элементы вправо в правильном порядке css

  • 772

У меня есть четыре элемента в меню, первый слева, а остальные три справа, но при плавании ul li float:right;элементы располагаются не по порядку.

[Menu3] [Menu2] [Menu1]

Но элементы должны отображаться в таком порядке:

[Menu1] [Menu2] [Menu3]

Полный рабочий код: https://jsfiddle.net/u1eu2dku/

Как отобразить элементы по порядку, но в том же макете меню?

.menu {
  width: 100%;
  float: left;
}

.menu ul li {
  float: right;
  list-style-type: none;
  text-align: left;
}

.menu ul li a {
  padding: 10px;
}
   <div class="menu">
  <ul>
    <li style="float:left;">logo</li>
    <li><a href="">Menu1</a></li>
    <li><a href="">Menu2</a></li>
    <li><a href="">Menu3</a></li>
  </ul>
   </div>

html

2 Answers

  1. Один из вариантов — сделать это с помощью flexbox, выравнивая элементы в конце строки и позволяя первому из них «расти», чтобы он занимал оставшееся пространство слева:

    .menu {
  width: 100%;
}

.menu ul {
  justify-content: flex-end;
  display: flex;
}

.menu ul li {
  list-style-type: none;
  text-align: left;
}

.menu ul li:first-child {
  flex: 1;
}


.menu ul li a {
  padding: 10px;
}
    <div class="menu">
  <ul>
    <li>logo</li>
    <li><a href="">Menu1</a></li>
    <li><a href="">Menu2</a></li>
    <li><a href="">Menu3</a></li>
  </ul>
   </div>

    • 6
  2. Best Answer

    Решение Shaz кажется мне идеальным, но если по какой-то причине вам нужна совместимость с браузерами, которые не поддерживают flexbox, вы также можете использовать display:inline-blockи выровнять вправо с помощью text-align:

    .menu {
  width: 100%;
  float: left;
  text-align:right;
}

.menu ul li {
  display:inline-block;
  list-style-type: none;
  text-align: left;
}

.menu ul li a {
  padding: 10px;
}
    <div class="menu">
  <ul>
    <li style="float:left;">logo</li>
    <li><a href="">Menu1</a></li>
    <li><a href="">Menu2</a></li>
    <li><a href="">Menu3</a></li>
  </ul>
   </div>

    • 2