与弹性框对齐时没有空格 无法对齐文本

Question

我想知道是什么导致它无法读取跨度或 p 标签之间的任何空格，以及为什么跨度不与其他所有内容对齐中心？

li {
display: flex;
align-items: center;
}
li img {
width: 25px;
height: 25px;
}
li span {
align-self: center;
}

<ul>
<li>
<a href="https://placeholder.com">
<img src="http://via.placeholder.com/350x150"> <span> Username  </span>
</a>
<p> added you as a friend</p>
</li>
</ul>

Answer 1

使用 创建空间。

或者在跨度上使用填充/边距。

li {
display: flex;
align-items: center;
justify-content: center;
}
li img {
width: 25px;
height: 25px;
}
li a {
display: flex;
align-items: center;
text-decoration: none;
}
li span {
margin: 0 8px;
}

<ul>
<li>
<a href="https://placeholder.com">
<img src="http://via.placeholder.com/350x150"> <span> Username  </span>
</a>
<p> added you as a friend</p>
</li>
</ul>