CSS плавает вправо без изменения порядка?

Question

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

HTML

<div id="topnav"><ul class="topnavlinks"><li class="menu-474 first"><a href="/" title="Home page">Home</a></li> 
<li class="menu-540 active-trail active"><a href="/our-company" title="" class="active">Our company</a></li> 
<li class="menu-541"><a href="/news_blog" title="">Blog</a></li> 
<li class="menu-930"><a href="/faq" title="Frequently Asked Questions">FAQ</a></li> 
<li class="menu-900 last"><a href="/contact" title="Contact">Contact</a></li> 
</ul></div> 

CSS

#topnav { width:100%; height:14px; background:#b8b8b8; border-bottom:1px solid #989898; } 
.topnavlinks { width:980px; margin:0px auto; } 
.topnavlinks ul { float:right; } 
.topnavlinks li { float:left; } 
.topnavlinks a { color:#fff; text-decoration:none; padding:0px 27px; } 

В настоящее время он не плавает вправо на всех, и с некоторыми другими вариациями я выскажусь плавать правильно, только с обратным порядком.

Answer 1

Попробуйте добавить дополнительный контейнер

HTML

<div id="topnav"><div class="cont"><ul class="topnavlinks"><li class="menu-474 first"><a href="/" title="Home page">Home</a></li> 
<li class="menu-540 active-trail active"><a href="/our-company" title="" class="active">Our company</a></li> 
<li class="menu-541"><a href="/news_blog" title="">Blog</a></li> 
<li class="menu-930"><a href="/faq" title="Frequently Asked Questions">FAQ</a></li> 
<li class="menu-900 last"><a href="/contact" title="Contact">Contact</a></li> 
</ul></div></div> 

CSS

.cont { width:980px; margin:0px auto; } 
#topnav { width:100%; height:14px; background:#b8b8b8; border-bottom:1px solid #989898; } 
.topnavlinks ul { float:right; } 
.topnavlinks li { float:left; } 
.topnavlinks a { color:#fff; text-decoration:none; padding:0px 27px; } 

Answer 2

Помните есть горизонтальная прокладка 27px. Это ставит меню справа:

#topnav { width:100%; height:14px; border-bottom:1px solid #989898; text-align:right; } 

.topnavlinks { margin:0px auto; display:inline; float:right;} 

.topnavlinks ul { float:right; text-align:left; } 

.topnavlinks li { display:inline; text-align: left;} 

.topnavlinks a { color:#fff; text-decoration:none; padding:0px 27px;} 

Answer 3

http://jsfiddle.net/gVnrM/ Demo

This one