浮动w /只有一些文字有边框的麻烦

时间:2018-02-21 15:38:51

标签: html css

我在创建“图片链接”中显示的图片时遇到了问题。我尝试将它作为一个包含自定义项目符号的列表,但是它们将框推到它的左边,同时也没有显示图像。

我正在考虑将这些框作为单独的段落,每个段落都有一个边框,然后将它们浮动到文本旁边的边框。但我不知道如何实际做到这一点。

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

Image link what I've already done

1 个答案:

答案 0 :(得分:0)

我不知道您的代码看起来如何,但我认为这是您正在寻找的,不是吗?您可以明显地将颜色更改为类似于您提供的图像,如果这是您想要的。

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