html - 向左浮动 span 和 div 不能按照我想要的方式工作

Question

所以我正在开发一个即将推出的模板，我试图用我的代码达到的目标在这张照片中。

但是我在我的代码中得到的是这个

我的 HTML 代码和 CSS 代码在下面:

.days {
  font-size: 180px;
  font-family: "Oswald";
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  float: left;
}
.smalltext {
  font-size: 25px;
  font-family: "Oswald";
  letter-spacing: 10px;
  color: #fff;
  text-transform: uppercase;
  float: left;
}

<ul id="clockdiv">
  <li>
    <div class="smalltext">Days</div>
    <span class="days"></span>
  </li>
</ul>

问题是我怎样才能像设计那样将它们都 float 到左边？

Answer 1

简单:删除 float完全。

我相信您有点想多了。 float明确告诉元素将自己定位在相邻位置，而您想要的外观似乎恰恰相反。

像 <div> 这样的 block 元素除非另有说明，否则将自然地出现在彼此之上并左对齐，因此通过删除 float: left;从这两个元素，您应该能够实现您想要的外观。

此外，为了满足我自己的好奇心...我假设您使用 <ul> 是有原因的和 <li>为此列出元素(这似乎不是任何类型的列表)？