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

Use a CSS Child Selector:

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

This will only apply the rules to the direct descendants of the root ul element.

---

Illustration:

<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>