Question

我正在尝试设置导航栏的背景颜色，但是该颜色似乎没有扩展到子容器。我想念什么？我正在使用显示Flexbox，因此我可以平均分配导航栏的内容。我认为这与Flex属性有关，但是我找不到在线有用的东西。请帮忙！

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: orangered;
}

li, a {
    text-decoration: none;
    color: white;
    font-size: 35px;
}

header {
    display: flex;
    justify-content: space-between; /*evenly distribute flex box */
    align-items: center;
    padding: 30px 5%;
    background-color: orange;
    overflow: hidden;
    margin: auto;
}

.logo {
    cursor: pointer;
    width: 100px;
    height: 100px;
}

.nav_links_left {
    list-style: none;
}

.nav_links_left li{
    display: inline-block;  /* make it side by side */
    padding: 0 10px;
}

.nav_links_left li a{
    transition: all 0.3s  ease 0s;  /* Make a tags move */
}

.nav_links_left li a:hover{
    color: black;
}

<body>
    <header>
        <nav>
            <ul class="nav_links_left">
                <li><a href="#home">Home</a></li>
                <li><a href="#support">Support</a></li>
                <li><a href="#About">About</a></li>
            </ul>
        </nav>
        <img class="logo" src="images/RhymeMaster_Logo.png" alt="logo">
        <nav>
            <ul  class="nav_links_left">
                <li><a href="#login">Login</a></li>
                <li><a href="#logout">Logout</a></li>
            </ul>
        </nav>
    </header>
  <script src="js/scripts.js"></script>
</body>

Answer 1

*选择页面上的任何元素，并将orangered作为background-color应用于所有元素，而这些元素本身不会覆盖background属性。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* background-color: orangered; */
}

如果要保留orangered作为背景色，请添加：

body {
  background-color: orangered;
}

CSS父级背景颜色未填充子容器

1 个答案: