100%宽度的div仍然比应该宽

Question

我刚遇到一个问题,我的一个div太宽了.我希望它适合浏览器大小.这是写的:

<div><ul>
    <li style="width: 20%"><a href="1.php">1</a></li>
    <li style="width: 20%"><a href="2.php">2</a></li>
    <li style="width: 20%"><a href="3.php">3</a></li>
    <li style="width: 20%"><a href="4.php">4</a></li>
    <li style="width: 20%"><a href="5.php">5</a></li>
</ul></div>

这是css文件内容:

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}      
ul {
    list-style-type: none;
    background-image: url(myimage.png);
    height: 80px;
    width: 100%;
    margin: auto;
}
li {
  float: left;
}
ul a {
     background-image: url(ndvder.png);
     background-repeat: no-repeat;
     background-position: right;
     padding-right: 30px;
     padding-left: 30px;
     display: block;
     line-height: 80px;
     text-decoration: none;
     font-size: 22px;
     color: #331D1D;
 }
 ul a:hover {
    color: #FFF;
 }

我用了一些css生成器.这是我完全不理解的部分:如果我<ul>的设置覆盖100%的可用宽度,为什么它更宽？我有那个恼人的滚动条.我不认为这20%的<li>因素是错误的,因为它们总和达到100%:D.我在哪里犯了错误？

Answer 1

您的列表具有默认填充.

添加padding:0到您的<ul>规则.

jsFiddle例子

ul {
    list-style-type: none;
    background-image: url(myimage.png);
    height: 80px;
    width: 100%;
    margin: auto;
    padding:0;
}