Итак, я работаю над шаблоном, который скоро появится, и то, что я пытаюсь достичь с помощью своего кода, находится здесь, на этой фотографии.
Но что я получаю в моем коде, так это
Мой код 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>Вопрос в том, как я могу переместить их обоих влево, как и дизайн?
4 ответа
Возможно, использовать поплавки - не лучшая идея.
Однако классический ответ на вашу проблему - использовать очистить для второго элемента:
.days {
font-size: 180px;
float: left;
clear: left;
}
.smalltext {
font-size: 25px;
float: left;
}<div class="smalltext">Days</div>
<span class="days">135</span>Просто подумайте об использовании элементов «div» для переноса и выравнивания текста:
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;
}
Просто: полностью удалить float.
Я думаю, вы немного переоценили это. float специально указывает элементам располагаться рядом друг с другом, тогда как ваш желаемый внешний вид кажется полной противоположностью.
Блочные элементы, такие как <div>, естественно будут располагаться друг над другом и выровнены по левому краю, если не указано иное, поэтому, удалив float: left; с обоих элементов, вы сможете добиться желаемого вида.
Вдобавок, просто чтобы удовлетворить мое любопытство ... Я предполагаю, что есть причина, по которой вы используете для этого элементы списков <ul> и <li> (которые, похоже, не являются списком какого-либо вида )?
Вы можете использовать левое поле для класса days или вам не нужно использовать float left, просто используйте его для div и маржу для div дней.