英文:
Why can't I change the background color of the navBar div
问题
我正在尝试将navBar div的背景颜色更改为黑色，但当我尝试设置它时，它没有任何效果。 reset.css 添加在 CSS 代码片段的底部。我已经尝试了许多方法来修复它，但不确定是什么原因导致它不起作用。如果您能在您的答案中解释为什么它不起作用，那将是很好的。
#navBar {
background-color: black;
}
#liL {
float: left;
margin: 10px 0 0 50px;
}
.liR {
float: right;
margin: 60px 50px 0 0;
}
.linkNav {
text-decoration: none;
color: black;
font-family: Helvetica;
font-weight: 100;
}
#logo {
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="navBar">
<ul id="ulNav">
<li id="liL"><img id="logo" src="#"></li>
<li class="liR"><a class="linkNav" href="#">Menu</a></li>
<li class="liR"><a class="linkNav" href="#">Locations</a></li>
<li class="liR"><a class="linkNav" href="#">Contact</a></li>
<li class="liR"><a class="linkNav" href="#">About us</a></li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>
英文:
I am trying to change the background color of the navBar div to black but it doesn't do anything when I try and set it. The reset.css is added at the bottom of the css snippet. I have tried many things to fix it and im not sure what causes it. If you could explain why it is not working in your answer that would be great.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#navBar {
background-color: black;
}
#liL {
float: left;
margin: 10px 0 0 50px;
}
.liR {
float: right;
margin: 60px 50px 0 0;
}
.linkNav {
text-decoration: none;
color: black;
font-family: Helvetica;
font-weight: 100;
}
#logo {
height: 100px;
}
/* CSS reset */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
input {
border: 1px solid #b0b0b0;
padding: 3px 5px 4px;
color: #979797;
width: 190px;
}
address,
caption,
cite,
code,
dfn,
th,
var {
font-style: normal;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
q:before,
q:after {
content: '';
}
abbr,
acronym {
border: 0;
}
<!-- language: lang-html -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="navBar">
<ul id="ulNav">
<li id="liL"><img id="logo" src="#"></li>
<li class="liR"><a class="linkNav" href="#">Menu</a></li>
<li class="liR"><a class="linkNav" href="#">Locations</a></li>
<li class="liR"><a class="linkNav" href="#">Contact</a></li>
<li class="liR"><a class="linkNav" href="#">About us</a></li>
</ul>
</div>
<script src="" async defer></script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
如果您坚持使用浮动布局，您需要为ul元素设置一些高度。
实现这一目标的一种方法是使用overflow属性。
这确保ul在垂直方向上增长以包含其子元素：
#ulNav {
overflow: hidden;
}
但正如已经提到的，最好使用一种替代方法，比如弹性盒子（flexbox），因为浮动布局从未用于构建布局，并且可以用现代的弹性盒子（flex）或网格（grid）布局来优雅地替代。
英文:
If you insist on using floats you need to give the ul element some height.
One way to achieve this is to use the overflow property.
This makes sure the ul grows vertically to include its children:
#ulNav {
overflow: hidden;
}
But as already mentioned, it's best to use an alternative method, like flexbox, because floats were never meant for building layouts and can be elegantly substituted with the modern flex/grid.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论