Вопросы Теги

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

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

[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;
}

4
задан 24.08.2016, 16:54
2 ответа

Она soluciГіn Shaz она мне кажется совершенной, но, если из-за какой-то razГіn ты нуждаешься в совместимости с мореходами, которые не выносили бы flexbox tambiГ©n pudes использовать 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
ответ дан 24.11.2019, 13:34
  • 1
    +1 из-за того, что вносит soluci и # 243; n, в котором могут нуждаться другие люди после того, как имеют этот недостаток. –  Shaz 24.08.2016, 22:22

Одна opciГіn состоит в том, чтобы делать это с 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>
4
ответ дан 24.11.2019, 13:34
  • 1
    Я приму очень во внимание Ваш ответ на будущее, но существуют проблемы совместимости с браузерами, которые они не выносили бы flexbox. Это была бы другая головная боль искать documentaci и # 243; n, чтобы давать ему совместимость с оставшейся частью браузеров. Но я тебе благодарен за время, что сноп, взятый в ответе, спасибо. –  Otto 24.08.2016, 22:17
  • 2
    Ну, это верное и мы соглашаемся полностью, правда во всех проектах в том, что я работаю сейчас, они используют flexbox, он вынесен начиная с IE10. caniuse.com/#feat=flexbox –  Shaz 24.08.2016, 22:21