水平内联列表填充

| 我有一个水平html内联列表，该列表用于导航，并且我想删除列表项之间的填充。这是因为每个框内都有需要触摸的图像。我已经尝试将导航容器和列表本身的页边距/填充设置为0，但是它将不起作用。谁能看到我要去哪里错了？ HTML：

<div id=\"navwrapper\">
            <ul id=\"navlist\">
                <li><a href=\"#\"><img src=\"images/nav/about.png\" /></a></li>
                <li><a href=\"#\"><img src=\"images/nav/gigs.png\" /></a></li>
                <li><a href=\"#\"><img src=\"images/nav/music.png\" /></a></li>
                <li><a href=\"#\"><img src=\"images/nav/facebook.png\" /></a></li>
            </ul>
        </div>

CSS：

#navwrapper {
width: 100%;
height: 26px;
margin: 0;
padding: 0;
}

#navwrapper ul {
text-align: right;
margin: 0;
padding: 0;
}

#navlist {
height: 26px;
margin: 0;
padding: 0;
}

#navlist li {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
}

谢谢！火花*

已邀请:

4 个回复

畦桨存灯

这实际上是因为您在<li>\之间的新行被格式化为空格。只需将所有这些标签放在同一行中的代码中，如下所示： <li></li><li></li> ..而不是..

<li></li>
<li></li>

良阑纠苫

您可以根据需要浮动列表。这是应该工作的CSS的示例更新，假设box模型没有其他问题：

#navwrapper {
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  clear: right; /* clear the children that are floated right */
}

ul#navlist {
  float: right; /* float all of this to the right */
  list-style: none;
  height: 26px;
  margin: 0;
  padding: 0;
  clear: left; /* clear the children that are floated left */
}

ul#navlist li {
  float: left; /* float the box left, so we can set margin/padding */
  margin: 0;
  padding: 0;
  background-color: #000000;
}