layout - 内联图像低于填充文本的 span 元素（两者都在内部在列表中）

Question

我遇到了奇怪的情况。我有一个列表，每个列表项都包含跨度和图像元素。它们都是内联的，只要 span 为空，它们就彼此相邻，但是当 span 有文本时，图像就像 display:block 一样，落在 span 元素下方，这不是我想要的效果。（我用文本动态填充跨度）

 <ul id="playerListInsideRoom">
    <li class="playerCircleInsideRoom circleFull" seatnumber="1">
        <img src="~/Images/Lobby/successGray.png" alt="image" /><span>    </span></li>
    <li class="playerCircleInsideRoom circleEmpty" seatnumber="2">
        <img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
    <li class="playerCircleInsideRoom circleEmpty" seatnumber="3">
        <img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
    <li class="playerCircleInsideRoom circleEmpty" seatnumber="4">
        <img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
</ul>

 .playerCircleInsideRoom span{
 position:relative;
 left:50px;
 }

 #playerListInsideRoom img {
 height:15px;
 width:15px; 
 display:inline-block;
 position:relative;
 right:40px;
 }

即使我摆脱了相对位置，问题仍然存在。

Answer 1

如果内联元素的宽度大于容器（您的li元素）的允许宽度，则该行将中断。

您可以使用whitespace: nowrap onli来防止它（尽管这可能会破坏您的其余布局）。