Question

我正在尝试制作一个有关摄影的示例网站，从我的导航栏开始，我遇到了背景色不起作用的问题。我已经尝试了很多事情，例如在CSS文件上放置一个ID来调用我的导航。我也尝试过使用div，nav甚至使用类，但无法正常工作。很抱歉，这可能是一个简单的解决方法，但我对此并不陌生。

body , html {
    background-color: #F7FDFF;

}
div {
    background-color: #000;
}
ul {
    list-style-type: none; 

}
li a {
    display: block; 
}

ul li a {
    text-decoration: none; 
    float: right; 
    text-align: right;
    color: black; 
    padding: 1.5em; 
}

li a:hover{
    display: block;
    background-color: #B5B5B5;
    color: #000; 

}
.active {
    background-color: green; 
}
#navbar {
    background-color: rgb(18, 171, 209); 
}

<div>
    <nav id="navbar">
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

Answer 1

由于锚标记是浮动的，并且没有其他非浮动元素，因此导航元素已折叠。要解决这些问题，请执行以下步骤。

创建一个像这样的clearfix类。它将阻止您的nav元素崩溃。

.clearfix::after { content: " "; display: block; height: 0; clear: both; }

并将此类添加到导航元素

也从float: right;选择器中删除锚元素中的ul li a规则。现在，由于这个规则，您的最后一个元素成为第一个菜单，又名“ Contact”成为第一个菜单，而“ Home”成为最后一个菜单。了解为什么会发生read this。
为您的float: left;元素添加新规则li。如果不添加此规则，则li元素中的每个li元素都将占一行，因为默认情况下li元素是块级元素。为了使它们保持同一行，您必须添加此规则。您还可以添加display: inline-block来将其默认显示属性从block更改为inline，以使其保持在同一行。但是此解决方案存在一个小问题，您会注意到内联块元素之间的缝隙很小。如果这些小间隙对您的设计不是问题，请继续使用display: block;规则，否则使用float: left;。（要了解区别，将鼠标悬停在活动菜单旁边的菜单上）
为您的float: right;元素添加另外两个规则margin: 0;和ul。这将使菜单向右移动。 margin: 0;可以删除多余的边距。您可以根据设计更改/删除此规则。

<!DOCTYPE html> 
<html>
<head>
    <link href="Css/Stylesheets.css" rel="stylesheet">
    <meta charset= utf-8> 
    <meta name="viewport" content="width= device-width, initial-scale=1.0">
    <title>LTphotography</title>
</head>
<style>
body , html {
    background-color: #F7FDFF;

}
div {
    background-color: #000;
}
ul {
    list-style-type: none; 
    float: right;
    margin: 0;
}
li {
    float: left;
}
li a {
    display: block; 
}

ul li a {
    text-decoration: none;
    text-align: right;
    color: black; 
    padding: 1.5em; 
}

li a:hover{
    display: block;
    background-color: #B5B5B5;
    color: #000; 

}
.active {
    background-color: green; 
}
#navbar {
    background-color: rgb(18, 171, 209); 
}

.clearfix::after { 
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
}
</style>`
<body>
    <div>
        <nav id="navbar" class="clearfix">
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

Answer 2

包含li的内容正在崩溃，因为它们包含浮动内容。您需要为li项目添加一个clearfix。

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

<ul>
 <li class="clearfix"></li>
 // and so on
</ul>

https://www.w3schools.com/howto/howto_css_clearfix.asp

也就是说，您也可以直接从锚元素中删除float: right。没必要。

为什么我的导航栏不显示背景颜色

2 个答案: