Добрый вечер. Сейчас верстаю одну страницу и мне нужно выровнять блоки в одну строку, использую я для этого float: left; Все бы хорошо, но у меня блоки сливаются из-за того, что я ранее использовал float:left для ul, li. Но, почему они сливаются? Вроде бы я даже вынес их в отдельный блок div.
CSS и HTML:
@import url(reset.css);
@font-face {
font-family: PTSans NarrowBold; /* Имя шрифта */
src: url(../font/pt-sans-narrow-bold.ttf); /* Путь к файлу со шрифтом */
}
body{
text-transform: uppercase;
background: url(../img/price-background.png);
}
header{
width: 100%;
height: 75px;
background-color: #000000;
}
.top-menu-list{
height: 70px;
width: 940px;
margin: 0 auto;
}
.top-menu-list ul li{
float: left;
margin: 0 auto;
text-decoration: none;
margin-right: 45px;
font-family: PTSans NarrowBold;
font-size: 16px;
color: #ffffff;
}
.top-menu-list ul{
padding-top: 29px;
padding-left: 20px;
}
.top-menu-list .menu-exit {
float: right;
background: url(../img/enter.png) no-repeat;
}
.top-menu-list .menu-exit a{
padding-left: 25px;
text-decoration: none;
color: #ffffff;
}
.top-menu-list a{
text-decoration: none;
color: #ffffff;
}
.top-menu-list a:hover{
text-decoration: underline;
}
main{
display: block;
margin: 0 auto;
width: 940px;
height: 795px;
}
.mini-menu{
height: 63px;
padding-top: 59px;
font-family: PTSans NarrowBold;
color: #000000;
}
.mini-menu h1{
font-size: 30px;
padding-bottom: 29px;
}
.mini-menu ul li{
float: left;
font-size: 14px;
}
.mini-menu a{
text-decoration: none;
color: #000000;
}
.mini-menu a:hover{
text-decoration: underline;
}
.mini-menu .price-li{
list-style-image: url(../img/price-rhomb.png);
margin-left: 35px;
padding-left: 10px;
}
.title-main .line-left{
margin-top: 79px;
background: url(../img/price-line.png) no-repeat;
width: 160px;
height: 2px;
padding-right: 25px;
float:left;
}
.title-main h2{
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Price</title>
<link rel="stylesheet" type="text/css" href="style/price.css">
<link rel="stylesheet" type="text/css" href="style/log.css">
</head>
<body>
<header>
<div class="top-menu-list">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Информация</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Прайс-лист</a></li>
<li><a href="#">Магазин</a></li>
<li><a href="#">Контакты</a></li>
<li class="menu-exit"><a href="#dialog" name="modal">Вход</a></li>
</ul>
</div>
</header>
<main role="main">
<div class="mini-menu">
<h1>Barbershop Borodinski - Прайс-лист</h1>
<ul>
<li><a href="#">Главная</a></li>
<li class="price-li"><a href="#">Прайс-лист</a></li>
</ul>
</div>
<div style="clear: both;"></div>
<div class="title-main">
<div class="line-left"></div>
<h2>Истинно мужская классика</h2>
<div class="line-right"></div>
</div>
</main>
</body>
</html>