列表中的奇怪边距

Question

我正在尝试设置菜单样式，但我仍然遇到这种奇怪的边缘，它出现在FF4和IE中。

这是影响css的唯一因素：

#header ul
{
  display: inline;
}
#header ul li
{
  list-style-type: none;
  background: #000;
  display: inline;
  margin: 0;
  padding: 0; 
}
#header ul li a
{
  color: #fff;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  text-align: center;
}

这是HTML：

  <div id="header">
    <ul id="toplinks">
      <li><a href="#">Hello</a></li>
      <li><a href="#">Herp</a></li>
      <li><a href="#">Derp</a></li>
    </ul>
  </div>

正如你所看到的那样，双方都出现了一个边缘，我希望它没有余量（或者1px就可以了）......

Answer 1

那不是月亮......我的意思是......保证金。

您所看到的是元素之间的空白区域。 Inline-block将元素视为内联，除了它们有高度，宽度，边距，填充等。会发生的新行+间距你给你的html元素进行了很好的缩进，它被显示为元素之间的空格。 / p>

内联块也不是跨浏览器的一致性。我建议将display:block;与浮点数一起使用。

编辑以添加建议：

如果你想要很好的缩进，但想要避免额外的空白区域（就像在所有XML数据中一样），请使用我称之为“腥符号”的文章

而不是：

<div id="header">
 <ul id="toplinks">
  <li><a href="#">Hello</a></li>
  <li><a href="#">Herp</a></li>
 <li><a href="#">Derp</a></li>
</ul>

使用：

<div id="header"
  ><ul id="toplinks"
    ><li><a href="#">Hello</a></li
    ><li><a href="#">Herp</a></li
    ><li><a href="#">Derp</a></li
  ></ul
></div>

元素包含的空格会被保留，但元素中的空格 不 。

Answer 2

时间扼杀CSS Reset！我首先包括这个，然后开始设计。它使得它变得更加容易，因为大多数HTML看起来都是相同的跨浏览器。

但为了解决你的问题，我会检查某处是否存在流浪边界属性。我之前有过流氓边界，他们让我疯了。要杀死它（暂时），试试这个：

border-style: none;

如果我们有完整的 CSS（别担心，我们不会偷它），我实际上可以摆弄它并给你一个功能齐全的答案。

Answer 3

将您的CSS更改为

#header ul
{
  display: inline;
}
#header ul li
{
  float:left;
  background: #000;
  margin-left: 1px;;
  padding: 0; 
}
#header ul li a
{
  color: #fff;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  text-align: center;
}