CSS 父背景顏色未填充子容器

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 個解決方案

解決方案1
1 已采納 2020-09-13 20:36:23

CSS 父背景顏色未填充子容器

問題描述

1 個解決方案

解決方案1 1 已采納 2020-09-13 20:36:23

解決方案1
1 已采納 2020-09-13 20:36:23