Question

一般来说，我坚持为移动版做适当的菜单。我的问题是左边的列表不需要的填充（你可以看到填充的左下边框），我很难找到错误。谢谢你的回答，这是代码：

<nav>
 <div id="menubar">
  <a href="#" id="menu-icon"></a>
  <ul>
   <li><a href="#">Test 1</a></li>
   <li><a href="#">Test 2</a></li>
   <li><a href="#">Test 3</a></li>
   <li><a href="#">Test 4</a></li>
  </ul>
</div>

CSS：

#menu-icon {
    display:inline-block;
    width: 40px;
    height: 40px;
    float: right;
    background: #364886 url(../Images/Interface/menu-icon.png) center;
    }
#menubar {
    position: relative;
    }
ul {
    list-style:none;
    }
ul a:visited,
ul a:link,
ul a:hover  { 
    text-decoration: none;
    color: white;
    }
nav ul, nav:active ul { 
    width: 90%;
    display: none;
    position: absolute;
    background: #364886;
    font-family: 'Roboto', sans-serif;
    font-size: 12pt;
    color: white;
    right: 0px;
    top: 24px;
    }
nav li {
    text-align: center;
    width: 100%;
    padding: 10px 10px 10px 10px; /* top-right-bottom-left*/
    margin: 0;
    border-bottom: 1px dotted white;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }
nav:hover ul {
    display: block;
    }

Answer 1

添加填充：ul为0 ul { 列表样式：无; 填充：0; }

带有li列表菜单的不需要的左侧空间

1 个答案: