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有一些边距和填充，则会为某些元素分配一些属性值。因此，为了解决这个问题，您应该按如下方式重置这些值：

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

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

侧导航栏问题

1 个答案: