css - Div 后跟 Para 在同一行

Question

代码

<div style="width:10px;height:10px;border:1px solid #F00;background:red;"></div>
<p>Red</p>
<div style="width:10px;height:10px;border:1px solid #00F;background:blue;"></div>
<p>Blue</p>

在上面的代码中，我希望在不同的行中有两个方框，后跟颜色名称。但它在一行中给出了盒子，而在另一条线。如何在同一行中实现这一点

[] Red
[] Blue

Answer 1

要快速修复，只需将此添加到您的 CSS 中:

p,div{
  display: inline-block;
}

这种方式将更改所有 div 和 p 元素的属性。

通常您会将类分配给元素，这样您就可以从一个地方定位它们并且只定位它们。