我想在 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/ 中的代码

因此，请帮助我正确修改我的代码，以在相同边距的框后获取文本。提前致谢。

原文由 j. dot 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>= Local/ Passenger Trains</div>

原文由 Max Wolfen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用方形 html 实体怎么样？

 <div style="color:blue">&#9632;</div>

原文由 RobD 发布，翻译遵循 CC BY-SA 4.0 许可协议