layout - インライン画像がテキストで満たされたスパン要素の下にドロップします（両方とも内部にあります）リスト内）

Question

私は奇妙な状況に遭遇しました。リストがあり、各リスト項目はスパン要素と画像要素で構成されています。これらは両方ともインラインであり、スパンが空である限り、互いに隣接していますが、スパンにテキストがある場合、画像はdisplay：blockであるかのように機能し、スパン要素の下に配置されます。これは、私の望ましい効果ではありません。（スパンを動的にテキストで埋めます）

 <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 onを使用してliそれを防ぐことができます (ただし、レイアウトの残りの部分が壊れる可能性があります)。