Float не работает со списком

Eduard96 · March 24, 2019

Всем привет! Верстаю первый макет и столкнулся с неприятной трудностью.
У меня проблема следующего рода: есть два блока, один зафлоачен налево, другой направо. Внутри правого блока находится список - меню. При этом второй блок на строку ниже первого, но если убрать список и просто оставить текст, то он встаёт нормально. Что я упускаю?

<Doctipe! html>
<head>
	<title>Наша компания</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
</head>	
<body>
	<div class="head">
		<div class="layout-position">
			<div class="header-content">
				<div class="Name">Имя компании</div>
				<div class="Menu">	
					<ul>
						<li>О нас</li>
						<li>Фото</li>
						<li>Ссылки</li>
					</ul>
				</div>
			</div>	
		</div>
	</div>
	<div class="main">
		<div class="layout-position">
			<div class="sidebar">fdgf</div>
			<div class="main_content">sdfg</div>
		</div>
	</div>
</body>
</html>

body {
	font-family: "Arial" sans-serif;
	margin: auto;
	padding: 0px;
	color: white;
	width: 1400px;
}
.head {
	height: 100px;
	background-color: #5DB3E2;
}
.layout-position {
	margin: auto;
	width: 800px;
	border: 2px dashed black;
}
.layout-position::after {
	content: "";
	display: table;
	height: 0px;
	clear: both;
}
.header-content {
	height: 80px;
	margin-top: 35px;

}

.Name {
	float: left;
	font-size: 20px;
	width: 150px;
	margin-right: 0px;
}
.Menu {
	float: right;
	font-size: 20px;
}	
a {
	text-decoration: none;
	color: white;
}
li {
	display: inline;
}

npofopr · March 24, 2019

Изучите лучше как пользоваться Инспектором кода (DevTools).
Там вам сразу станет всё понятно, что распирает блок.

Sign In

Float не работает со списком

Recommended Posts

Eduard96

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information