我想在HTML和CSS中创建一个小方块颜色的填充框。最重要的是 - 我想在方框后写一行

Question

我用代码创建了彩色方框

.box {
  height: 20px;
  width: 20px;
  margin-bottom: 15px;
  border: 1px solid black;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div class='box red'></div>= Super Fast Trains<br>
<div class='box green'></div>= Mail/Express Trains<br>
<div class='box blue'></div>= Local/ Passenger Trains

但是我想要在当前代码中没有显示的框旁边的文本。我也尝试了'float：left'属性，但是使得第二行和第三行没有显示在相同的边距中。请参阅https://jsfiddle.net/14to4gej/上的代码 因此，请帮助我在我的代码中进行正确的修改，以获得相同边距的文本。提前致谢。

Answer 1

试试下一个：

.box {
  float: left;
  height: 20px;
  width: 20px;
  margin-bottom: 15px;
  border: 1px solid black;
  clear: both;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div>
  <div class='box red'></div>= Super Fast Trains</div><br>
<div>
  <div class='box green'></div>= Mail/Express Trains</div><br>
<div>
  <div class='box blue'></div>
</div>= Local/ Passenger Trains

看到现场：https://codepen.io/Sviatoslav_FrontEnd/pen/OQqdVN

Answer 2

您还可以使用before pesudo选择器并在内容/文本之前创建一个框。

.box {
  position: relative;
  margin-left: 20px;
}
.box:before{
  position: absolute;
  left: -20px;
  content: "";
  height:20px;
  width:20px;
  margin-bottom:15px;
  border:1px solid black;
}
.box.red:before{
  background-color:red;
}
.box.green:before{
  background-color:green;
}
.box.blue:before{
  background-color:blue;
}

<div class='box red'>= Super Fast Trains</div>
<div class='box green'>= Mail/Express Trains</div>
<div class='box blue'>= Local/ Passenger Trains</div>

https://jsfiddle.net/14to4gej/21/

Answer 3

将文本放在<p>内的标题或<div></div>中然后它将在框内。要将其移到左侧，只需在左侧添加填充。

Answer 4

像往常一样，使用Flexbox轻松实现经典CSS（float，clearfix，inline-block等）的痛苦：

.row {
    display : flex;
    align-items : center;
    margin-bottom: 15px;
}
.box {
  height: 20px;
  width: 20px;
  border: 1px solid black;
  margin-right : 5px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div class="row">
  <div class='box red'></div>
  <span>= Super Fast Trains</span>
</div>

<div class="row">
  <div class='box green'></div>
  <span>= Mail/Express Trains</span>
</div>

<div class="row">
  <div class='box blue'></div>
  <span>= Local/ Passenger Trains</span>
</div>

Answer 5

简单。只需将您的框和文本包装到带边距的div中，然后添加vertical-align。 https://jsfiddle.net/14to4gej/24/

div:not(.box) {
    margin-bottom: 15px;
}

.box {
    ...
    vertical-align: middle;
}

Answer 6

首先我建议选择使用:before标签作为@Keja建议，或者你可以实际将两个元素包装在一个html标签中，例如div或p，然后在Css中设置它们的样式：

 <div class="option-one">
      <span class="box red"></span>
      <p>= Super Fast Trains</p>
 </div>
 <div class="option-two">
      <span class="box green"></span>
      <p>= Mail/Express Trains</p>
 </div>
 <div class="option-three">
      <span class="box blue"></span>
      <p>= Local/ Passenger Trains</p>
 </div>

其次不要使用br，因为它不是语义的。如果您想在不同的可视块中使用两个项目，则可能需要它们位于不同的逻辑块中。

在大多数情况下，这意味着只使用不同的元素，例如<p>Text</p><p>Other text</p>，然后使用CSS将块正确地隔开。

在某些情况下，<br>在语义上是有效的，即换行符是您发送的数据的一部分。这实际上仅限于2个用例 - 诗歌和邮寄地址。

希望能帮助到你 ：）