css - 导航栏列表宽度

Question

我现在正在创建一个导航栏，我希望导航上主要元素的宽度是自动的，但子元素都是固定宽度。列表的制作方式是这样的:

    <li>Main Element
        <ul>
        <li> Sub Element </li>
        <li> Sub Element </li>
        <li> Sub Element </li>
        </ul>
    </li>

对每个主菜单项及其子菜单项重复此操作。

我遇到的问题是我希望子元素的宽度为 100px，但主要元素等于文本大小加上左右两侧的填充 10px。看来我不能在不改变两者的情况下改变一个，即使在尝试创建类来分离它们之后也是如此。我还尝试在我的外部样式表中编辑 ul li 和 li ul 样式。预先感谢您提供的所有帮助。

Answer 1

ul li 影响 ul 下任何级别的所有 li。 ul > li 只影响作为 ul 的直接子代的 li。它称为子组合器:http://www.w3.org/TR/css3-selectors/#child-combinators

如果你想在不使用类的情况下实现它，你必须使用它(在我看来，使用类实际上是更好的方法 - http://www.jsfiddle.net/joplomacedo/xeWA4)

诀窍是在 ul > li 下的主菜单项上应用您想要应用的样式，然后在 ul ul > li 上覆盖它们。这是一把 fiddle - http://jsfiddle.net/joplomacedo/xeWA4/3/

编辑:
您实际上根本不需要使用子组合器。我想到了子组合器 当我第一次阅读您的问题时，我从未质疑过它们的用途。因此，被 ul ul li 覆盖的 ul li 也能完美工作 - 并使其更简单。