Css 导航栏列表宽度

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

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

主元素

子元素
子元素
子元素

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

---

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

ul-li

和

li-ul

样式。提前感谢您的帮助。

ul li

影响

ul

下任何级别的所有

li

ul>li

仅影响作为

ul

直接子项的

li

。它被称为子组合器：

如果要在不使用类的情况下实现它，则必须使用它（在imo-中，使用类实际上是更好的方法）

诀窍是在

ul>li

下的主菜单项上应用您想要应用的样式，然后在

ul>li

处覆盖它们。这是一把小提琴-

编辑：
实际上，您根本不需要使用子组合器。我想到了儿童组合器

---

当我第一次读到你的问题时，我从未质疑过它们的用途。因此，

ul-li

被

ul-li

覆盖的

ul-li

也能很好地工作，并使它更简单。

我也这么认为，但是整个导航都在

ul

标签内，所以澄清一下，它是

主
子

最外层的ul标签是不必要的吗？我怎么能这样做；据我所知，

style=“width:1em；padding left:10px；padding right:10px；”

应该可以工作，但以前不是这样，可能是因为最外层的ul。下面是我在不添加类的情况下如何做（就像您所做的那样）：。它变得非常混乱，可能很难坚持下去。这就是为什么我不会这样做。这并没有真正起作用，但我认为我把css弄混了一点。我今晚得把它叫停了，明天我会试着把它清理干净，试着把它修好，看看它能不能用。如果我能让它工作，我会接受答案，如果不能，我会有更多的问题。谢谢你的帮助！没问题，我明天会在这里；）