html - 水平内联列表填充

Question

我有一个用于导航的水平 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;
}

谢谢!

Spark *

Answer 1

您可以根据需要 float 列表。这是一个应该工作的 CSS 更新示例，假设盒子模型没有其他问题:

#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;
}