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

【问题标题】：Navbar element affected by float rule of an element in another div导航栏元素受另一个 div 中元素的浮动规则影响
【发布时间】：2019-04-19 14:24:02
【问题描述】：

我正在尝试编写一个标题下带有导航栏的简单网站。问题是导航栏元素的位置直接受表头元素的长度影响，但只有当表头元素有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>

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

【问题讨论】：

将oveflow: hidden 添加到header-bar...当您使用浮动容器时，您必须清除它...参见explanation here
当你不clear浮动时的另一个有趣的行为 - 见stackoverflow.com/questions/39684091

标签： html css css-float

【解决方案1】：

这是你的 CSS 现在根据你的设计要求修复它。

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

【讨论】：