html - CSS 拼图 : move last two item of the navigation to the right

Question

我有一个水平导航，我希望最后两个元素被推到容器的右侧。

只有一个元素，我可以简单地 float 导航的最后一个元素。但我想将此应用到两个元素 - 我有一个限制，即它们的顺序在 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;
}