3

尝试使用包含 5 个（或更多项目）的列表使代码正常工作，但试图让它像所需的图像显示的那样工作。

我对 css 很陌生，所以请多多包涵。谢谢

任何帮助，将不胜感激。

期望：

    第 1 项 第 2 项 第 3 项 第 4 项 第 5 项

目前：

    第 1 项 第 5 项 第 4 项 第 3 项 第 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>
4

5 回答 5

2

尝试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/

于 2013-03-05T22:34:00.043 回答
0

你可以像这个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

于 2013-03-05T22:00:07.060 回答
0

就放

float: left;

里面#navlist li和#navlist #right。

于 2013-03-05T22:15:22.147 回答
0

为什么不使用 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;
}
于 2013-03-05T22:20:59.197 回答
0

这似乎工作 jsfiddle.net/Z3a6Z/23。谢谢大家的指导。

于 2013-04-02T19:31:37.970 回答