Проблема с переворотом меню при перемещении вправо в CSS

Question

У меня есть div, который установлен на 100%, и внутри этого другого div, который центрирован и установлен на 883px.

Навигация - это список, но если я добавлю элемент float: right к этомуЭлемент перевернул порядок списка.Конечно, я мог бы изменить порядок в коде, но должен быть лучший способ?

<div id="navigation"><!-- START NAVIGATION -->
    <ul class="navigation">
        <li><a href="#" title="" alt="" class="current">home</a></li>
        <li><a href="#" title="" alt=""><img src="images/navline.png" align="right">portfolio</a></li>
        <li><a href="#" title="" alt="">blog</a></li>
        <li><a href="#" title="" alt="">get in touch</a></li>
    </ul>
</div>
<div id="border"></div><!-- END NAVIGATION -->
<div style="clear:both"></div>

И CSS ...

#navigation {
width:100%;
background-color:#383a3c;
height:43px;
}

#navigation ul {
width:883px;
margin:0px auto;
}

ul.navigation {
font-family:'ChunkFiveRegular', Arial, sans-serif;
font-size:18px;
}

#navigation li a {
display:block;
margin:13px 0px 0px 0px;
text-decoration:none;
color:#8cd8db;
float:right;
}

Может кто-нибудь помочь показать мне ошибку моегопути?

Answer 1

Плавающая вправо меняет элементы. Это ожидаемое поведение.

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

#navigation {
  width:100%;
  background-color:#383a3c;
  height:43px;
}

#navigation ul {
  width:883px;
  margin:0px auto;
}

ul.navigation {
  font-family:'ChunkFiveRegular', Arial, sans-serif;
  font-size:18px;
  float: right;
}

#navigation li {
  float: left;
  padding: 0px 10px;
}

#navigation li a {
  display:block;
  margin:13px 0px 0px 0px;
  text-decoration:none;
  color:#8cd8db;
}   

В этом случае меню по-прежнему не отображается выровненным вправо, поскольку вы указали ширину: 883px; к элементу ul. Если вы хотите, чтобы он был выровнен по правому краю, просто удалите эту ширину.