虽然边距和填充0，但菜单中的差距很小

时间：2016-11-28 13:46:59

标签： html css

我遇到了问题：我想创建一个自适应菜单，但在移动模式下有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>

有人知道我在哪里弄错了吗？

5 个答案:

答案 0 :(得分：2)

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;
   }

答案 1 :(得分：1)

我不确定我是否理解正确，但也许这就是你要找的东西：

#menu ul {
  margin: 0px;
  padding-left: 0px;
}

答案 2 :(得分：0)

您试图将菜单设置为position：absolute并将每个li设置为相对并将它们设为display：block（float：left），您无需执行所有操作。 Float：left使元素显示：block。

而不是所有这些，您可以考虑使用display：flex作为布局而不是浮动。

Flexbox也是响应式的。

检查以下代码段

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;
  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 {
    width: 100%;
    background-color: green;
    height: 60px;
    padding: 10px;
    margin: 0px;
    position: relative;
    left: 0px;
    top: 0px;
  }
  #menu ul {
    display: flex;
    justify-content: space-between;
  }
  #menu li {
    list-style: none;
    cursor: pointer;
    background-color: red;
  }
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="css/mobile.css" rel="stylesheet" type "text/css">
</head>

<body>
  <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>
</body>

</html>

答案 3 :(得分：0)

您所看到的很有可能是浏览器中嵌入的默认样式表。您通常应该在CSS文件的开头使用它来重置样式表。这会将所有预定义的填充/边距等重置为0。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*============ END OF RESET =================*/

我觉得这与你的问题有关。值得一试。

答案 4 :(得分：0)

你也可以使用flexbox查看小提琴https://jsfiddle.net/f76vdyxe/ 

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) {
  nav ul{
    margin: 0;
    padding: 0;
    display: flex;
  }
#main{
    max-width: 800px;
    height: auto;
    left:0%;
    margin:0px;
}

#menu{
    position:absolute;
    display:block;
    float:left;
    width:100%;
    background-color:green;
    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;
    background-color:red;
    
    flex: 1;

} 
}
<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>

相关问题
最新问题