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

这似乎与jsfiddle.net/Z3a6Z/23有关。谢谢大家的指导。

按顺序在同一行上左右对齐列表

5 个答案: