内嵌跨度的高度被忽略

我有以下HTML内嵌跨度的高度被忽略

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

，我设置每个<span>的padding-top和padding-bottom到10px。

但似乎<li>根据其内容<span>的高度（它只能根据文本大小调整）没有改变其高度，以便三个背景重叠。

我该如何解决这个问题？

来源

2011-08-18 Clare Z

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

来源

2011-08-18 17:04:47 tybro0103

刚才从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>

来源

2014-05-07 16:37:36 VictorySaber

内嵌跨度的高度被忽略

回答

相关问题