时间戳

首页 > 解决方案 > CSS父背景颜色未填充子容器

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

问题描述

我正在尝试设置导航栏的背景颜色，但是颜色似乎没有扩展到子容器。我错过了什么？我正在使用显示弹性框，所以我可以均匀地分布导航栏的内容。我认为这与 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>

标签： htmlcss

解决方案

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

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

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

body {
  background-color: orangered;
}

推荐阅读