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 example

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

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

1 个答案: