0

Добрый вечер. Сейчас верстаю одну страницу и мне нужно выровнять блоки в одну строку, использую я для этого 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>

7
  • .mini-menu:after{display: table; clear:both; content:' ';} вот такую конструкцию используй и дай тому блоку после, которого начинается новый блок с float:left, если я правильно к этому блоку добавил или к какому нужно Commented 20 окт. 2016 в 20:12
  • Что-то не срабатывает... :(
    – Konark
    Commented 20 окт. 2016 в 20:16
  • к каким блокам есть вопросы? Commented 20 окт. 2016 в 20:21
  • От main и ниже.
    – Konark
    Commented 20 окт. 2016 в 20:26
  • попробуй дать оболочке с float'om display:table; clear:both; без after, а то у тебя там половина вываливается Commented 20 окт. 2016 в 20:30

1 ответ 1

1

Попробуй дать оболочке с float'om display:table; clear:both; и такую конструкцию :after{display: table; clear:both; content:' ';} , если нужно очистить обтекания.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.