Всегда один левый плавающий элемент списка css

Question

У меня есть навигация со следующим HTML-кодом:

<ul id="nav">
  <li><a>home</a></li>
  <li><a>login</a></li>
  <li class="selected"><a>shop</a></li>
  <li><a>help</a></li>
</ul>

Что я хочу сделать, так это чтобы элемент с «выбранным» классом всегда появлялся слева от навигации.

Таким образом, если выбран магазин, отображаемая навигация будет выглядеть так: магазин home login помощь

Если помощь выбрана:
помощь home вход магазин

Мой css:

#nav li {
display: inline; }

#nav li.selected {
  width: 230px;
  text-align: center;
  background: #b52830;
  margin-right: 10px;
  float: left;
  display: block; }

  #nav li.selected a {
    display: block;
    padding-right: 0; }

    #nav li.selected a:hover {
      color: #fff; }

Работает для определенного браузера, но не для всех. Есть идеи?

Если это не работает, выбранный элемент перемещается ниже остальных ...

выбран магазин:
home login help
магазин

Answer 1

Я бы постарался избежать сочетания встроенного и блочного отображения следующим образом. Было бы полезно, если вы напишите, как выглядит, если это не работает.

Answer 2

Другой альтернативой может быть использование языка программирования (например, php или javascript) для печати списка ссылок в порядке с классом «selected» в верхней части списка.

Плавающее влево поместит первый упорядоченный li дальше всего влево на той же строке, что и остальные элементы li. И наоборот, плавающее право поместит первый упорядоченный li дальше всего вправо.

Как вы применяете класс «selected» к соответствующему li?

Answer 3

Если ul # nav всегда имеет фиксированную ширину, вы можете указать .selected плавать влево и все остальные элементы плавать вправо.