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

Question

我有一个流体标题布局，它几乎完全基于百分比值(宽度，padding, margin)，就像这样

<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%宽的header-container而不是父li-container，与填充相同。所以当然我现在可以让33.3/3 = 11.1%的宽度，这将是我想要的结果，但它似乎很奇怪。我哪里做错了?

谢谢

Answer 1

你需要写与子选择器作为这个

 header > ul > li{
 header > ul > li ul li{

记住要对所有元素应用border-box，因为你要使用padding

Answer 2

如果您希望子元素采用父元素的大小，则需要将position:relative;设置为父元素。这里有一个小提琴