html - 如何将基于百分比的值应用于子元素？

Question

我有一个流畅的标题布局，它几乎完全基于类似的百分比值(宽度、填充、边距)

<header>
    <ul>
        <li>Foo</li>
        <li>
            <h4>Foo2</h4>
            <ul>
                <li>Underfoo</li>
                <li>Underfoo2</li>
                <li><img src="superimage.jpg"/></li>
            </ul>
        </li>
        <li>Foo3</li>
    </ul>
</header>

还有这样的造型

header{
width:100%;
}
header ul{
width:100%;
}

header ul li{
width:33.3%
display:inline-block;
vertical-align:top;
margin:0;
padding:0;
box-sizing:border-box;
}

好了到此为止。但是如果我想将基于百分比的值应用于依赖于它们的父元素的嵌套元素，这是行不通的。因此，如果我这样做:

header ul li ul li{
width:33.33%
padding:0 15%;
}

我得到的元素是 33.3% 宽的标题容器而不是父 li 容器，与填充相同。所以我现在当然可以使 33.3/3 = 11.1% 宽度，这就是我想要的结果，但这似乎很奇怪。我在那里做错了什么？

谢谢

Answer 1

你需要这样写子选择器

 header > ul > li{

 header > ul > li ul li{

请记住将边框框应用于所有元素，因为您正在使用填充