html - 如何对齐 中的内容？

Question

我这里有一个非常好的菜单:

http://jsfiddle.net/y9jbQ/

<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4
            <ul class="nav">
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
            </ul>
        </li>
        </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

现在的问题是，假设我想要一个向右箭头的图像，向右对齐以防有其他子菜单。放在里面不是健康的事情。我不想创建任何东西来复制的行为。所以，

<li><a href="/something"><div float left><div float right></a></li>

这不是一个好方法。

Answer 1

使用 CSS Child Selector :

ul.root > li > a { /* css declarations */ }

这只会将规则应用于根 ul 元素的直接后代。

---

插图:

<ul class="root">
    <li>
        <a href="#"><!-- MATCH --></a>
    </li>
    <li>
        <a href="#"><!-- MATCH --></a>
        <ul>
            <li>
                <a href="#"><!-- NO MATCH --></a>
            </li>
        </ul>
    </li>
</ul>