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

谢谢！

闪耀*

Answer 1

您可以根据需要浮动列表。这是一个应该有效的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;
}

Answer 2

float li：

http://jsfiddle.net/durilai/g7KRe/

Answer 3

所有现代浏览器都可以通过'inspect element'功能帮助您找到此类问题。（如果你使用的是Firefox，你会想要FireBug插件。）

浏览器将显示应用于每个元素的样式以及填充的来源。

习惯于在浏览器中检查元素比从某人那里得到关于这个特定问题的幸运猜测要有用得多。

Answer 4

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

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

..而不是..

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

水平内联列表填充

4 个答案: