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

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 中添加 padding:0 ul { 列表样式:无； 填充:0；