Left and Right aligning of a list on the same line in sequence

Question

Trying to use a list with 5 (or more items) gotten the code to work but trying to get it to work as the desired image shows.

I'm very new at css so please bear with me. thanks

Any help would be appreciated.

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

Try using display: table in your 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%;
}

And your markup now looks like this:

<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>

Here's an updated fiddle: http://jsfiddle.net/QfD6J/7/

Answer 2

You can do it like this jsFiddle example

Using this CSS

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

You can also use float:left instead of display:inline-block

Answer 3

Just put

float: left;

inside #navlist li and #navlist #right .

Answer 4

Why not using 2 lists with one floating on the right? 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

this seems to work jsfiddle.net/Z3a6Z/23. thanks everyone for the direction.