gpt4 book ai didi

html -
    流出

转载 作者:行者123 更新时间:2023-11-28 07:21:01 25 4
gpt4 key购买 nike

所以我在这里遇到了一个问题,考虑到我正在创建一个简单的导航栏,这个问题特别令人沮丧。我到处寻找解决方案都无济于事,所以希望你们能对此有所启发。发生的事情是,我所有的标签都没有显示在导航栏内,它实际上是在容器外移动,甚至没有显示:内联 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com