Я пытаюсь закодировать простой сайт с навигационной панелью под заголовком. Проблема заключается в том, что на положение элементов панели навигации напрямую влияет длина элемента заголовка, но только в том случае, если элемент заголовка имеет правило float: left css.
Два элемента находятся в отдельных элементах div и не имеют общих правил CSS.
Я уже пытался использовать justify-content, align-items, margin: auto и т. Д. Кажется, что единственный способ решить проблему - это удалить правило float: left из текста заголовка, но мне нужно оставь это.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="style.css" />
<head runat="server">
<title>Lewis</title>
</head>
<body>
<form id="form1" runat="server">
<div id="header-bar">
<h1>Lewis' Website</h1>
<img src="images/headericon.jpg" />
</div>
<div id="navbar">
<nav>
<a href="index.aspx"> Home </a>
<a href="about.aspx"> About </a>
<a href="blog.aspx"> Posts </a>
</nav>
</div>
</form>
</body>
</html>
1010 * CSS *
#header-bar img {
width: 150px;
height: 150px;
border-radius: 50%;
padding-right: 10%;
padding-left: 10%;
}
#header-bar h1 {
font-family: Arial;
font-size: 70px;
color: white;
padding-left: 10%;
float: left;
}
#navbar {
background-color: white;
margin: 0px;
}
#navbar nav a {
font-size: 35px;
margin: 0 15px;
}