html - 段落 float 有问题，只有一些文本有边框

Question

我在创建“图像链接”中显示的图像时遇到问题。我尝试将其设为带有自定义元素符号的列表，但它们将框推到它的左侧，同时也不显示图像。

我正在考虑将这些框制作成单独的段落，每个段落都有一个边框，然后将它们 float 在没有边框的文本旁边。但我不知道如何实际执行此操作。

正如您在第二个链接中看到的那样 - 我正在尝试将列表添加到其他两个元素的右侧 - 如果这会改变任何内容。

Image link what I've already done

Answer 1

我不知道您的代码看起来如何，但我认为这就是您要找的，不是吗？如果您想要的话，您显然可以将颜色更改为与您提供的图像类似的颜色。

.box {
  text-align:center;
  border:1px solid black;
  width:50px;
  height:40px;
  padding-top:10px;
  float:left;
}

.label {
float:left;
  padding-top:15px;
  padding-left:5px;
}

<div class="box">MAR<br/>12</div>
<label class="label">Spring Break</label>
<br style="line-height:70px;"/>
<div class="box">APR<br/>27</div>
<label class="label">Last Day of Spring Classes</label>
<br style="line-height:70px;"/>
<div class="box">APR<br/>30</div>
<label class="label">Final Exam Week</label>