Question

我想要做的是在标题中有两个逻辑导航单元。 [1,2,3,4,5] 的那个应位于左侧，而 [6,7,8] 位于右侧。< / p>

现在我有以下HTML代码

<div id="firstNav">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>
<div id="secondNav">
    <ul>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
    </ul>
</div>

和以下CSS

#firstNav ul li{
    display: inline-block;

}

#firstNav {
    float:left;
}

#secondNav ul li{
    display: inline-block;

}

#secondNav {
    float:right;
}

我的问题是，如果我不使用内联块，则所有内容都是垂直的而不是水平的，然后我会在单个子<li>项中强制它为水平。

这是实现我想要的可接受的方式还是有人能给我一个更好/更优雅的解决方案？

Answer 1

#firstNav, #firstNav ul li, #secondNav ul li {
    float:left;
}
#secondNav {
    float:right;
}

看起来就像你需要的那样。

使用css在标题中的一行上分隔2个逻辑单元

1 个答案: