為什么我的其中一張圖片沒有並排顯示？

Question

我正在嘗試將 3 個圖像和一些文本排列在一個“行”上，前 2 個圖像排列得很好，與文本相同，但第 3 個圖像拒絕，我不知道為什么。

到目前為止，這是我的代碼：

 * { box-sizing: border-box; } body { display: inline-block; width: 800px; height: 1000px; } .logo { padding: 5px; display: inline; } .pfp { display: inline; } .msg { display: inline; } .userid { text-decoration-color: white; background-color: rgb(250, 250, 250); text-align: left; width: 50px; border-radius: 20%; display: block; font-size: 10px; margin-left: 160px; margin-top: -18px; }

 <div class='logo'> <img src='logo.jpg' , width=1 00px> </div> <div class="pfp"> <a href="Profile Page.html"> <img src='pfp.jpg' , width=5 0px> </a> </div> <div class='userid'> <span>[user_id]</span> </div> <div class='msg'> <a href='messages.html'> <img src='messages.jpg' , width=5 0px> </a> </div>

Answer 1

您的.userid還需要內聯或內聯塊顯示，以便下一項可以與它內聯。 現在它顯示為塊，因此它將后面的任何內容推到下一行。

 * { box-sizing: border-box; } body { display: inline-block; width: 800px; height: 1000px; } .logo { padding: 5px; display: inline; } .pfp { display: inline; } .msg { display: inline; } .userid { text-decoration-color: white; background-color: rgb(250, 250, 250); text-align: left; width: 50px; border-radius: 20%; //display: block; display: inline; font-size: 10px; margin-left: 160px; margin-top: -18px; }

 <div class='logo'> <img src='logo.jpg' , width=1 00px> </div> <div class="pfp"> <a href="Profile Page.html"> <img src='pfp.jpg' , width=5 0px> </a> </div> <div class='userid'> <span>[user_id]</span> </div> <div class='msg'> <a href='messages.html'> <img src='messages.jpg' , width=5 0px> </a> </div>