html - 侧面导航栏的问题

Question

我确定我刚刚犯了一个愚蠢的错误，但我似乎无法解决这个问题。我的导航栏中的列表项不是从我的 div 的边缘开始的，它几乎就像左边有一个边距。

HTML

<div class="container">
<div id="topline"> blah blah </div>
    <div class="leftbox">
    <img src="images/totalbulllogo.svg" alt="Total Bull Clothing Company Logo" /> 
    </div>
    <div id="banner">
    <img src="images/totalbullbanner2.jpg" alt="Total Bull Clothing Company Logo" /> 
    </div>
    <div id="navmenu">
    <ul>
    <li class="active"><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">STORE</a></li>
    <li><a href="#">SALE ITEMS</a></li>
    <li><a href="#">CONTACT</a></li>
    </ul>
    </div>
    <div id="mainContent"> FEATURED ITEMS</div>

</div>

CSS

html, body {    
        margin:0;
        padding:0;
        font-family: Calibri, Arial, sans-serif;
}

@font-face {
font-family:'Neon 80s';
src:url('../fonts/neon.ttf'),
    url('../fonts/neon.eot');
    }

.container {
        clear: both;
        margin: 0 auto;
        padding: 0;
        width: 58%;
        background-color: #FFFFFF;}

#topline {  float:left;
        text-align:right;
        padding: 0;
        width: 100%;
        height: 5%;
        background-color: #FFF;
        margin-top:2%;
        margin-bottom:2%;}

.leftbox {
        float:left;
        padding: 0;
        width: 30%;
        background-color: #5D2F92;}
.leftbox img {width: 96%;
margin-left: 3%
margin-right:1%;}

#banner img {width: 100%;}


#banner {float:left;
     width:68%;
     margin-left:2%;}

#navmenu {
        float:left;
        padding: 0;
        width: 30%;
        background-color: #5D2F92;
        height: 100%;
        margin-top:0.5%;
        font-family:'Neon 80s';
        font-size:18pt;
        text-align:left;
        }

#navmenu li {
        list-style:none;
        margin: 0;
        }

#navmenu li a {text-decoration:none;
        color:#FFFFFF;
        margin: 0;
        display:block;
        padding:20px 0px;}  
#navmenu li.active a {background-color:#C49A6C;}        

#mainContent {float:left;
          width:68%;
          background-color:red;
          text-align:center;
          margin-top:0.5%;
           margin-left:2%;}

Answer 1

您忘记重置浏览器 ul 默认 CSS 值。

默认情况下，根据浏览器，有一些属性值分配给一些元素，例如 ul 有一些 ma​​rgin 和 padding。因此，为了解决这个问题，您应该按如下方式重置这些值:

http://jsfiddle.net/gespinha/dW9wB/1/

  #navmenu ul{
       margin:0;
       padding:0;
    }