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{

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

Answer 2

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

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

2 个答案: