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会影响li下任何级别的所有ul。 ul > li仅影响li的直接子项ul。它被称为儿童组合子：http://www.w3.org/TR/css3-selectors/#child-combinators

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

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

修改
实际上你根本不需要使用儿童组合器。儿童组合器出现在我脑海中当我第一次阅读你的问题时，我从未质疑过他们的用法。因此，被ul li覆盖的ul ul li也可以完美地工作 - 并使其更简单。

导航栏列表宽度

1 个答案: