bob i {font-size: 10px}
显示了一个整齐的水平 block ,名称标题对齐。当我将 bob i
的 font-size
增加到 30px
时,两个 spans
没有整齐地水平对齐了。图标不是那么大,为什么它会使 bob span
block 爆炸?是否有可能让 bob i {font-size: 40px}
并保持所有内容整齐地水平对齐?
.joe span
{
display: block;
padding: 20px;
text-align: left;
}
.pete
{
width: 30%;
float: left;
background-color: green;
}
.bob
{
width: 10%;
float: left;
background-color: blue;
}
.bob i {
font-size: 30px;
padding-left: 10%;
}
<div class="wrapper"><div class="joe"><span class="pete">Pete</span>
<span class="bob">Bob<i class="icon">@</i></span>
</div></div>
最佳答案
只需更改这些类属性
.joe span {
display: flex;
align-items: center;
padding: 20px;
}
.bob i {
font-size: 40px;
padding-left: 10%;
line-height: 0;
}
.joe span {
display: flex;
align-items: center;
padding: 20px;
}
.pete
{
width: 30%;
float: left;
background-color: green;
}
.bob
{
width: 10%;
float: left;
background-color: blue;
}
.bob i {
font-size: 40px;
padding-left: 10%;
line-height: 0;
}
<div class="wrapper"><div class="joe"><span class="pete">Pete</span>
<span class="bob">Bob<i class="icon">@</i></span>
</div></div>
关于html - 图标和填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47733616/