Question

我有以下html

<ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
</ul>

我将每个<span>的{{1}}和padding-top设置为padding-bottom。

但似乎10px根据其内容<li>的高度（它仅根据文字大小进行调整）不会改变其高度，因此<span> s '背景重叠。

我该如何解决这个问题？

Answer 1

将范围设置为display:block;。内联元素不知道高度和填充。

Answer 2

从tybro0103的答案开始，如果你在span元素旁边有东西，可以使用inline-block将它们保持在一条线上并仍然可以控制高度。在这里，我使用反增量等来按每个元素编号框，我希望它们在一行上。

    span.messageBody {
background-color:green;
padding: 2em;
display:inline-block; /* Make the span able to grow in height */
line-height: 20px;
height:2em;
}

/* The numbering boxes */
.ranking {
counter-reset: ranking;
}

span.messageBody::before {
counter-increment: ranking;
content: counter(ranking);
display: inline-block;
width: 2em;
text-align: center;
position: relative;
top: -.5em;
left: -.5em;
background: hsl(45, 70%, 80%);
color: hsl(202, 80%, 30%);
opacity: 0.7;
}

<ul class="ranking">
<li><span class="messageBody">1</span></li>
<li><span class="messageBody">2</span></li>
</ul>

Answer 3

Span是一个内联元素，默认情况下其显示为内联。它会忽略高度和宽度属性以及边距。

请参阅下面的页面以获得清晰的主意 https://www.impressivewebs.com/difference-block-inline-css/

内联跨度的高度被忽略

3 个答案: