Question

我使用代码

创建了彩色方形框

＆＃13;

.box {
  height: 20px;
  width: 20px;
  margin-bottom: 15px;
  border: 1px solid black;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

＆＃13;

<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

＆＃13;

但是我想要在当前代码中没有显示的方框旁边的文字。我也尝试过浮动：左边＆＃39;属性，但制作第二个＆amp;第三行没有显示相同的边距。查看https://jsfiddle.net/14to4gej/处的代码
因此，请帮助我正确修改我的代码，以获得相同边距的文本。提前谢谢。

Answer 1

您还可以使用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 2

如何使用方形html实体？

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

Answer 3

尝试下一步：

.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 4

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

Answer 5

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

.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 6

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

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

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

Answer 7

首先我建议您选择使用: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个用例 - 诗歌和邮寄地址。

希望有所帮助：）

我想在HTML＆amp;中创建一个小方形填充框。 CSS。最重要的是 - 我想在方框后写一行

7 个答案: