导航栏列表宽度

Question

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

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

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

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

Answer 1

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

如果你想在不使用类的情况下实现它，你必须使用它（使用类实际上是imo-http://www.jsfiddle.net/joplomacedo/xeWA4）

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

编辑：
实际上，您根本不需要使用子组合子。孩子组合子出现在我的脑海中当我第一次读到你的问题时，我从来没有质疑过它们的使用。因此，ul ul li覆盖的ul li也能很好地工作，并使其更简单。