gpt4 book ai didi

html - 为什么菜单和页面顶部之间有一个奇怪的空间?

转载 作者:太空宇宙 更新时间:2023-11-03 23:27:37 25 4
gpt4 key购买 nike

我用 html 做了一个简单的导航栏,但是 nav 顶部和页面顶部之间有一个小空间。

html:

<div id="nav">
<div id="menu">
<ul>
<li><a href="#">Home</a></li><li>
<a href="#">About</a></li><li>
<a href="#">Dowenload</a></li><li>
<a href="#">Contact</a></li>
</ul>
</div>
</div>

CSS:

body{
margin:0px;
background-color:green;
}
#menu ul{

}
#menu ul li{
display: inline-block;
list-style-type: none;
font-size:20px;
padding:15px;
}
#menu ul li a{
text-decoration: none;
color:#ccc;
}

Demo

我的问题是有人知道如何解决这个问题吗?

最佳答案

margin: 0; 添加到 #menu ul

JSFiddle - DEMO

body{
margin:0px;
background-color:green;
}
#menu{
width:100%;
height:53px;
background: -webkit-linear-gradient(#222, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#222, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#222, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(#222, black); /* Standard syntax */
}
#menu ul{
margin: 0;
}
#menu ul li{
display: inline-block;
list-style-type: none;
font-size:20px;
padding:15px;
}
#menu ul li a{
text-decoration: none;
color:#ccc;
}
#menu ul li:hover{
background: -webkit-linear-gradient(#222, #1A1A1A); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#222, #1A1A1A); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#222, #1A1A1A); /* For Firefox 3.6 to 15 */
background: linear-gradient(#222, #1A1A1A); /* Standard syntax */
}
	<title>test page</title>
<body>
<div id="nav">
<div id="menu">
<ul>
<li><a href="#">Home</a></li><li>
<a href="#">About</a></li><li>
<a href="#">Dowenload</a></li><li>
<a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="content">

</div>
<div id="footer">

</div>
<script src="js/jquery.js"></script>
<script src="js/start.js"></script>
</body>

关于html - 为什么菜单和页面顶部之间有一个奇怪的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26354464/

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