Question

请看这个小提琴：http://jsfiddle.net/LAzbe/
这些空间在哪里？

HTML：

<header>
    <ul>
        <li class="active"><a href="#">Menu 1</a></li>
        <li class="active"><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a>
                    <ul>
                        <li><a href="#">Sub-sub 1</a></li>
                        <li><a href="#">Sub-sub 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub 4</a></li>
            </ul>
        </li>
        <li class="active"><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
        <li><a href="#">Menu 6</a></li>
    </ul>
</header>

CSS：

body {
  margin: 0;
  font-size: 15px;
  line-height: 25px;
  font-family: Helvetica, Arial, sans-serif;
}

ul, ol {
  margin: 0;
  padding: 0;
}

header {
  height: 86px;
}
header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
header > ul > li {
  display: inline-block;
  position: relative;
}
header > ul > li a {
  display: block;
  line-height: 83px;
  padding-left: 18px;
  padding-right: 18px;
  text-decoration: none;
  color: #888888;
  background-color: white;
}
header > ul > li:hover > a, header > ul > li.active > a {
  background-color: #f9f9f9;
  color: #888888;
  text-decoration: none;
  border-bottom: 3px #ec5d9d solid;
}

header > ul > li ul {
  display: none;
}

Answer 1

负利润不是一个好主意。因为最后你会有一种漠不关心。

将li设置为display：block而不是inline-block，然后使用float：left;

e.g：

header > ul > li {
  display: block;
  position: relative;
    float:left
}

更新小提琴：http://jsfiddle.net/LAzbe/1/

Answer 2

如果你在讨论li元素之间的空间，那么否定边缘。

header > ul > li {
  display: inline-block;
  position: relative;
  margin-right:-4px;
}

这是因为inline-block。 Chris Coyer对此too有所了解。

对于IE 6-7来说，负边距不是一个好主意，但无论如何谁都在乎。

其他技术也有效且有效。

Answer 3

使用此

header > ul > li {
  float:left;
  position: relative;
}

菜单项之间的空格

3 个答案: