Позиционирование CSS и порядок отображения

Question

У меня есть блок HTML:

<ul>
  <li>a</li>
  <li>b</li>
  <li class="nav">c</li>
  <li class="nav">d</li>
</ul>

и набор правил CSS:

ul li {
 display: inline;
}

li.nav {
 float: right;
}

, которые не соответствуют моим намерениям: я хочу, чтобы это отображалось так:

ab                                      cd

но вместо этого

ab                                      dc

Разница заключается в отображаемом порядке элементов. Как мне отобразить элементы списка класса nav в их синтаксическом порядке?

Answer 1

Что ж, очевидное быстрое решение - просто изменить порядок элементов в списке:

<ul>
  <li>a</li>
  <li>b</li>
  <li class="nav">d</li>
  <li class="nav">c</li>
</ul>

Я предполагаю, что всякий раз, когда механизм рендеринга встречает элемент с float:right, он толкает этот элемент как можно дальше вправо. Таким образом, он сначала сталкивается с буквой «c» и толкает все вправо, затем встречает букву «d» и толкает ее как можно дальше вправо, но «c» уже занимает самое правое место, поэтому "остается слева от него. По сути, элементы располагаются в порядке справа налево, а не слева направо.

Другим вариантом, я думаю, было бы разделить элементы на два списка и просто применить стиль float: right ко второму списку в целом (то есть к элементу <ul>).

<ul>
  <li>a</li>
  <li>b</li>
</ul>
<ul class="nav">
  <li>c</li>
  <li>d</li>
</ul>

и

ul li {
 display: inline;
}

ul.nav {
 float: right;
}

Таким образом, сам список будет перемещаться по правому краю, но порядок элементов в нем не будет обратным.

Answer 2

Я исправил эту проблему, разделив список на две части и float поместив их в соответствующие позиции. Я обернул два списка div и применил к нему overflow: auto. Мой окончательный код CSS выглядел так:

ul li {
 display: inline
}

div.post-info-wrap {
 overflow: auto
}

ul.post-info {
 float: left
}

ul.nav {
 float: right
}

и моя разметка вроде:

<div class="post-info-wrap">
  <ul class="post-info">
    <li/>
  </ul>
  <ul class="nav">
    <li/>
  </ul>
</div>

Answer 3

Пропустите ul там, где вы хотите разместить содержимое / контейнер, и добавьте li в том порядке, в котором вы хотите его отобразить.

<div id="myblock">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
</div>

CSS

#myblock ul {
   display:inline;
   float:right;
}

#myblock li {
   float:left;
 }

Противоположность (плавающая влево, но в обратном порядке)

#myblock ul {
   display:inline;
   float:left;
}

#myblock li {
   float:right;
 }

Answer 4

Итак, на самом деле вам нужен список навигации и какой-то другой список? Почему бы не использовать 2 списка?

<ul class="other">
  <li>a</li>
  <li>b</li>
 </ul>
<ul class="nav">
 <li>c</li>
 <li>d</li>
</ul>

и css:

ul li {
display: inline;
}

.other{
float:left;
}

.nav {
float: right;
}

Answer 5

Если вы хотите, чтобы c & d отображались в блоке справа, вам нужно поместить их в один элемент блока, не устанавливая атрибут float для обоих. Я не думаю, что элементы списка, такие как <li>, являются правильным выбором для вашего намерения. Вы не хотите отображать один список, поэтому вы можете попробовать использовать два списка (где один из них имеет атрибут float) или просто простые элементы <div>.

Answer 6

Попробуйте это:

    ul {
        text-align: right;
    } 
    ul li {
     display: inline;
    }

    ul li.default {
     float: left;
    }
    li.nav {
     float: auto;
    }

<ul>
  <li class="default">a</li>
  <li class="default">b</li>
  <li class="nav">c</li>
  <li class="nav">d</li>
</ul>