我有一个问题:我想创建一个响应式菜单,但在移动模式下有类似 margin-left
和 margin-top
的东西,我不知道不知道如何消除这些差距。
这是我的代码:
body{
font-family: "Verdana", Geneva, sans-serif;
background-color: white;
margin: 0px;
font-size: 100%;
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
#main{
max-width: 800px;
height: auto;
background-color:#FF9;
overflow: hidden;
margin: 0px auto;
}
#menu{
width:20%;
background-color:#09F;
float: left;
text-align: center;
line-height: 20px;
}
#menu a {
text-decoration: none;
-webkit-transition: color .3s ease-in-out;
-moz-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
-ms-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
}
#menu a:hover{
color: red;
text-decoration:underline;
}
@media screen and (max-width: 800px) {
#main{
max-width: 800px;
height: auto;
left:0%;
margin:0px;
}
#menu{
position:absolute;
display:block;
float:left;
width:100%;
background-color:green;
height: 60px;
padding:0px;
margin:0px;
left:0px;
top:0px;
}
#menu li{
box-sizing: border-box;
position:relative;
list-style: none;
float: left;
cursor: pointer;
display: block;
width: 120px;
height:30px;
background-color:red;
}
}
<nav id="menu">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</nav>
有人知道我哪里出错了吗?
最佳答案
ul
有默认缩进值
ul{
margin-left:20px;
}
为避免这种冲突,您必须在 css 之上编写此代码
*{
margin:0;
padding:0;// Padding also took some indent. You can use if it was requires
}
或者这样写
ul{
margin-left:0;
}
关于html - 尽管边距和填充为 0,但菜单中的间隙很小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40845851/