受另一个元素的浮动规则影响的导航栏元素 div

Question

我正在尝试编写一个在 header 下带有导航栏的简单网站。问题在于导航栏元素的位置直接受 header 元素长度的影响，但仅当 header 元素具有 float:left css 规则时才存在。

这两个元素位于不同的 div 中，不共享任何 css 规则。

我已经尝试使用 justify-content、align-items、margin: auto 等。似乎解决问题的唯一方法是从中删除 float:left 规则header 文本，但我需要保留它。

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>

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;
}

Answer 1

这是您的 CSS 现在根据您的设计要求进行修复。

#form1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

受另一个元素的浮动规则影响的导航栏元素 div

Navbar element affected by float rule of an element in another div

html

css

css-float