按順序在同一行上左右對齊列表

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

嘗試在CSS中使用display: table ：

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

Answer 2

你可以像這個jsFiddle例子那樣做

使用這個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

這似乎工作jsfiddle.net/Z3a6Z/23。 謝謝大家的指導。