0

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

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

这对每个主菜单项及其子菜单项重复。

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

4

1 回答 1

1

ul li影响lia 下任何级别的all ul。ul > li只影响作为lia 的直接子级的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也可以完美地工作-并使其更简单。

于 2012-07-08T03:07:56.177 回答