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

你可以通过很多方式实现这一目标，这里有一个：

inline-block

div {
  width: 10px;
  height: 10px;
  border: 1px solid #F00;
}
div:first-of-type {
  background: red
}
div:nth-of-type(2) {
  background: blue
}
div,
p {
  display: inline-block
}

<div></div>
<p>Red</p>
<div></div>
<p>Blue</p>

使用span（内联元素）

div {
  width: 10px;
  height: 10px;
  border: 1px solid #F00;
}
div:first-of-type {
  background: red
}
div:nth-of-type(2) {
  background: blue
}
div {
  display: inline-block
}

<div></div>
<span>Red</span>
<div></div>
<span>Blue</span>

使用伪元素::before

span {
  position: relative;
   padding-left:15px
}
span::before {
  width: 10px;
  height: 10px;
  border: 1px solid #F00;
  content: '';
  position: absolute;
  left: 0;
  top:3px
}
span:first-of-type::before {
  background: red
}
span:nth-of-type(2)::before {
  background: blue
}

<span>Red</span>
<span>Blue</span>

Answer 2

要快速修复，只需将其添加到CSS：

p,div{
  display: inline-block;
}

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

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

Answer 3

尝试以下解决方案：

div {
  display:inline-block;
  width:10px;
  height:10px;
  border:1px solid #F00;
  margin-right:5px;
}
p {
  display:inline;
}
p:after {
  content:"\A";
  white-space:pre; 
}

<div style="background:red;"></div><p>Red</p>
<div style="background:blue;"></div><p>Blue</p>

提示：我会将这些项目换行以避免覆盖其他<p>和<div>项目的CSS，如下所示：

.legend div {
  display:inline-block;
  width:10px;
  height:10px;
  border:1px solid #F00;
  margin-right:5px;
}
.legend p {
  display:inline;
}
.legend p:after {
  content:"\A";
  white-space:pre; 
}

<div class="legend">
  <div style="background:red;"></div><p>Red</p>
  <div style="background:blue;"></div><p>Blue</p>
</div>
<div>line #1 (with div).</div>
<p>line #2 (with p).</p>

Div后跟Para在同一行

3 个答案: