Question

我有一个水平导航，我希望将最后两个项目推到容器的右侧。

只有一个项目，我可以简单地浮动导航的最后一项。但我想将它应用于两个元素 - 我有一个约束，它的顺序必须在HTML和查看器中相同。

我尝试了以下内容，但这打破了依赖于

的javascript代码

$('... a').parent().next().doSomething(...)

代码

<ul class="main main-nav">
    <li class="first"><a href="#projekte" class="first">Projekte</a></li>
    <li><a href="#aktuell">Aktuell</a></li> 
    <div class="push-right"> 
        <li><a href="#about">&Uuml;ber uns</a></li>
        <li><a href="#kurse">Kurse</a></li>
    </div>
</ul>

我有没有看到一些明显的解决方案？还有其他快捷方式吗？

Answer 1

您不应在div内放置ul：

<ul class="main main-nav">
    <li class="first"><a href="#projekte" class="first">Projekte</a></li>
    <li><a href="#aktuell">Aktuell</a></li>

    <li class="push-right"><a href="#about">&Uuml;ber uns</a></li> 
    <li class="push-right"><a href="#kurse">Kurse</a></li>
    <!-- Or Flip them to maintain order --> 
    <li class="push-right"><a href="#kurse">Kurse</a></li>
    <li class="push-right"><a href="#about">&Uuml;ber uns</a></li>
</ul>

CSS：

.push-right{
    float:right;
}

CSS谜题：将导航的最后两项移到右侧

1 个答案: