浮动左边的跨度和div在一起不是我想要的方式

因此，我正在研究即将推出的模板，以及我试图通过代码访问的内容在这张照片中。浮动左边的跨度和div在一起不是我想要的方式

但什么即时得到在我的代码是这样的

我的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>

问题是我怎样才能像设计一样将它们都浮在左边？

来源

2016-09-06 user2522053

也许这不是一个好主意，使用浮动。

然而，经典的回答您的问题将是第二个元素上使用明确：

.days { 
 
    font-size: 180px; 
 
    float: left; 
 
    clear: left; 
 
} 
 
.smalltext { 
 
    font-size: 25px; 
 
    float: left; 
 
}

<div class="smalltext">Days</div> 
 
<span class="days">135</span>

来源

2016-09-06 20:11:41 vals

THANK YOU VERY MUCH！ – user2522053

快乐，它帮助！ – vals

简单：一起删除float。

我相信你稍微推翻了这个。 float具体告诉元素相邻位置，而你期望的外观似乎是完全相反的。

像<div>这样的块元素自然会出现在另一个上面，除非另有说明，否则左对齐，因此通过从两个元素中删除float: left;，您应该能够实现所需的外观。

此外，只是为了满足自己的好奇心......我假设你有一个理由使用<ul>和<li>列表元素（这似乎不是任何类型的列表）？

来源

2016-09-06 19:51:36 Santi

您可以使用左边距天数课程，或者您不需要使用浮动余量，只需使用div和margin到天div即可。

来源

2016-09-06 19:57:05

就考虑使用“格”的元素来包装和对齐文字：

HTML

<html> 
    <body> 
    <div class="wrapper1">Days</div> 
    <div class="wrapper2">136</div> 
    </body> 
</html>

CSS

.wrapper1 { 
    position: relative; 
    width:  100%; 
    text-align: left; 
    font-size: 25px; 
    font-family: Oswald; 
} 

.wrapper2 { 
    position: relative; 
    width:  100%; 
    text-align: left; 
    font-size: 180px; 
    font-family: Oswald; 
} 

.wrapper2 p { 
    letter-spacing: 10px; 
}

来源

2016-09-06 20:55:57

浮动左边的跨度和div在一起不是我想要的方式

回答

相关问题