无法填充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>

Answer 2

您的li元素为inline，更改为inline-block将解决此问题。请参阅此SO问题/答案，以了解内联和内联块之间的区别：What is the difference between display: inline and display: inline-block?

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;