Question

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

Answer 1

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

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

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

1 个答案: