html - 不能填充 DIV 元素

Question

我在下面列出了 HTML 和 CSS 代码。

.a{
    border-bottom: 1px solid #000;
}
.b {
    border-bottom: 1px solid #000;
}
.c li{
    display: inline;
    padding-top: 50px;
}

<div class="a">
    <br>
    <br>
    <br>
</div>
<div class="b">
    <br>
    <br>
    <br>
</div>
<div class="c">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</div>

但我无法控制填充/边距 <div class="c"> .为什么以及如何解决这个问题？

Answer 1

填充在内联 元素上的行为与您预期的不同。

作为Alohci在下面的评论中指出，填充不会影响 non-replaced 的行高内联元素，因此不影响父元素的高度。

您可以使用 display: inline-block 代替(见下文)。

注意 inline-block是not supported in IE <= 7 。如果您关心过时的浏览器，您可以使用 float相反。

.a{
	border-bottom: 1px solid #000;
}
.b {
	border-bottom: 1px solid #000;
}
.c li{
	display: inline-block;
	padding-top: 50px;
}

<div class="a">
	<br>
	<br>
	<br>
</div>
<div class="b">
	<br>
	<br>
	<br>
</div>
<div class="c">
	<ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
	</ul>
</div>