Выравнивание влево и вправо списка в одной строке в последовательности

Question

Попытка использовать список с 5 (или несколькими элементами) получила код для работы, но попытка заставить его работать, как показывает желаемое изображение.

Я очень новичок в css, поэтому, пожалуйста, несите меня. спасибо

Любая помощь будет оценена по достоинству.

 
Desired: 

    Item 1          Item 2 Item 3 Item 4 Item 5 

Currently: 

    Item 1          Item 5 Item 4 Item 3 Item 2 

CSS

#navlist li 
{ 
display: inline; 
} 

#navlist #right 
{ 
float: right; 
margin-right: 10px; 
} 

#navlist li a 
{ 
text-decoration: none; 
} 

HTML

<div id="navcontainer"> 
<ul id="navlist"> 
    <li>Item 1</li> 
    <li id="right">Item 2</li> 
    <li id="right">Item 3</li> 
    <li id="right">Item 4</li> 
    <li id="right">Item 5</li> 
</ul> 
</div> 

Answer 1

это похоже работа jsfiddle.net/Z3a6Z/23. спасибо всем за направление.

Answer 2

Вы можете сделать это, как этот jsFiddle example

Используя этот CSS

#navlist li { 
    display:inline-block; 
    list-style-type:none 
} 
#navlist li:nth-of-type(1) { 
    margin-right:60px; 
} 

Вы также можете использовать float:left вместо display:inline-block

Answer 3

Просто поместите

float: left; 

внутри #navlist li и #navlist #right.

Answer 4

Почему бы не использовать 2 списка с одним плавающим справа? http://jsfiddle.net/rEc3V/

<div id="navcontainer"> 
    <ul class="nav pull-right"> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
    <ul class="nav"> 
     <li>Item 1</li> 
    </ul> 
</div> 

CSS:

.nav { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
.nav li { 
    display: inline-block; 
} 

.pull-right { 
    float: right; 
} 

Answer 5

Попробуйте использовать display: table в вашем CSS:

#navlist 
{ 
    display: table; 
} 

#navlist li 
{ 
    display: table-cell; 
    padding-right: 10px; 
    white-space: nowrap; 
} 

#navlist li:last-child 
{ 
    padding-right: 0; 
} 

#navlist li.span-full 
{ 
    width: 100%; 
} 

и разметка теперь выглядит следующим образом:

<div id="navcontainer"> 
    <ul id="navlist"> 
     <li class="span-full">Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
</div> 

Вот обновленная скрипка : http://jsfiddle.net/QfD6J/7/