我尝试将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;
}
/* 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;
}<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>
1条答案
按热度按时间cedebl8k1#
如果你坚持使用浮点数，你需要给予
ul元素一些高度。实现此目的的一种方法是使用
overflow属性。这样可以确保
ul垂直增长以包含其子对象：但正如前面提到的，最好使用另一种方法，比如flexbox，因为float从来就不是用来构建布局的，可以优雅地用现代的flex/grid来代替。