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: tableCSS で使用してみてください:

#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

1つが右側に浮いている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

置くだけ

float: left;

内側#navlist liと#navlist #right。

于 2013-03-05T22:15:22.147 に答える
0

これは jsfiddle.net/Z3a6Z/23 で動作するようです。皆さん、方向性をありがとう。

于 2013-04-02T19:31:37.970 に答える
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 に答える