Question

是否可以设置一个＆＃34;菜单栏＆＃34;从单个ul制作，然后向左浮动一些li，向右浮动一些？{1}}所以我现在的代码是

<body>
    <header><nav><ul>
        <li><a href="pg1.html">Menu1</a></li>
        <li><a href="pg2.html">Menu2</a></li>
        <li><a href="pg3.html">Menu3</a></li>
        <li><a href="pg4.html">Menu4</a></li>
    </ul></nav></header>
    ...
</body>

和css：

header > nav {
    background-color: red;
    height: 2em;
}
header > nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
header > nav > ul > li {
    float: left;
    padding: 0 1em;
}
header > nav > ul > li > a {
    display: block;
    font-family: 'Tahoma';
    color: white;
    line-height: 2em;
}
a:hover {
    color: yellow;
}
a {
    text-decoration: none;
}

菜单项当然都在左边，但有些可以浮动到右边而不会更改HTML＆＃34;显着？＆＃34;

Answer 1

您可以在右侧的列表项中添加一个类，然后为float:right;添加CSS规则

示例：

添加到您的CSS：

    .right {
        float:right;
    }

用此

替换您的HTML5

 <header><nav><ul>
    <li><a href="pg1.html">Menu1</a></li>
    <li><a href="pg2.html">Menu2</a></li>
    <li class="right"><a href="pg3.html">Menu3</a></li>
    <li class="right"><a href="pg4.html">Menu4</a></li>
</ul></nav></header>

另一种选择是创建2个div（一个向左浮动，另一个向右浮动）然后在每个div中放入一个列表。

Answer 2

在样式表中为浮动右侧的列表元素创建另一个类~~或id~~ 。这是我演示的一个jsfiddle：

http://jsfiddle.net/Z55hz/

样式表

header > nav {
    background-color: red;
    height: 2em;
}
header > nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
header > nav > ul > li {
    float: left;
    padding: 0 1em;
}

li.other {
    float:right;

}

header > nav > ul > li > a {
    display: block;
    font-family: 'Tahoma';
    color: white;
    line-height: 2em;
}
a:hover {
    color: yellow;
}
a {
    text-decoration: none;
}

HTML

<body>
     <header><nav><ul>
        <li><a href="pg1.html">Menu1</a></li>
        <li class="other"><a href="pg2.html">Menu2</a></li>
        <li><a href="pg3.html">Menu3</a></li>
        <li class="other"><a href="pg4.html">Menu4</a></li>
    </ul></nav></header>
    ...
</body>

如何在两个方向浮动ul？

2 个答案: