因此，考虑到我正在创建一个简单的导航栏，我在这里遇到的问题尤其令人沮丧。我在高空搜寻了无济于事的解决方案，因此希望你们能对此有所启发。发生的是，其中所有标签都没有显示在导航栏内，而是从字面上移到了容器之外，甚至没有显示：inline-block;。在这种情况下正在工作。希望你们能帮助我。
nav{
width: 100%;
height: 5em;
}
nav ul{
list-style: none;
width: 28%;
}
nav ul li{
float: left;
margin-left: 3%;
}
nav #logo{
width: 30%;
}
nav #logo img{
width: 80%;
}
nav a{
padding-bottom: 1%;
text-decoration: none;
}
nav a:link{
color: black;
}
nav a:hover{
border-bottom: solid black .1em;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="comp6.css" rel="stylesheet">
<title></title>
</head>
<body>
<nav>
<div id="logo">
<img src="images/logo.png">
</div>
<ul>
<li>
<a href="#"><p>Home</p></a>
</li>
<li>
<a href="#"><p>About Us</p></a>
</li>
<li>
<a href="#"><p>Services</p></a>
</li>
<li>
<a href="#"><p>Blog</p></a>
</li>
<li>
<a href="#"><p>Works</p></a>
</li>
<li>
<a href="#"><p>Contacts</p></a>
</li>
</ul>
</nav>
</body>
</html>最佳答案
我不知道对您有什么强制性要求我尝试过这种方式，可以根据需要修改以下内容
/*nav{
width: 100%;
height: 5em;
}
nav ul{
list-style: none;
width: 28%;
}
nav ul li{
float: left;
margin-left: 3%;
}
nav #logo{
width: 30%;
}
nav #logo img{
width: 80%;
}
nav a{
padding-bottom: 1%;
text-decoration: none;
}
nav a:link{
color: black;
}
nav a:hover{
border-bottom: solid black .1em;
}
/****** new styles ********/
nav {
/* width: 100%; */
/* height: 5em; */
/* float: left; */
display: block;
}
nav #logo {
width: 30%;
float: left;
}
nav ul {
list-style: none;
/* width: 28%; */
}
nav ul li {
float: left;
margin-left: 3%;
}<nav>
<div id="logo">
<img src="images/logo.png">
</div>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Works</a>
</li>
<li>
<a href="#">Contacts</a>
</li>
</ul>
</nav>在这里，我提供了我尝试的工作代码
My demo code
关于html - <ul>从<nav>中流血，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32086858/