为什么我的其中一张图片没有并排显示？

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>