html - 两个 float 的 li 元素之间的匿名空间

Question

我正在创建一个应用程序的 header ，但我发现了一个奇怪的问题，这在我之前从未发生过。问题是，我在标题中有两个列表，一个向左浮动，一个向右浮动，并且在所有 li 元素之间有两种类型的边框。没关系，但他们之间莫名其妙地创造了空间？或者至少，我找不到创建空间的内容

谁能告诉我哪里创建了空间？

这是 jsFiddle:jsFiddle link

或直接输入:

HTML:

<header id="header">

<ul class="left">
    <li class="title">jedna</li>
    <li class="new-task">dva</li>
    <li class="new-comment">NC</li>
</ul>

<ul class="right">
    <li class="logged">jedna  </li>
    <li class="logout"><a href="#">dva</a></li>
</ul>

CSS:

header
{
    position: relative;
    top: 0px;
    min-height: 35px;
    padding: 0px;
    margin: 0px;
    background-color: #efefef;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#efefef));
    background: -webkit-linear-gradient(top, #efefef, #bbbbbb);
    background: -moz-linear-gradient(top, #efefef, #bbbbbb);
    background: -ms-linear-gradient(top, #efefef, #bbbbbb);
    background: -o-linear-gradient(top, #efefef, #bbbbbb);


}

header ul
{
    margin: 0px;
    padding: 0px;
    line-height: 35px;
    list-style-type: none;
}

header ul li
{
    margin: 0px;
    display: inline;
    padding: 5px 10px;
    border-left: 1px solid #efefef;
    border-right: 1px solid #bbbbbb;
}

header ul li:first-of-type
{
    border-left: none;
    padding-left: 20px;
}

header ul li:last-of-type
{
    border-right: none;
    padding-right: 20px;
}

header ul.left
{
    float: left;
}

header ul.right
{
    float:right;
}

编辑:

这个空间:

Answer 1

您的 li 设置为 display: inline，因此您的浏览器在每个 li 之间放置一个空格，就像它在字。您可以通过几种方式来应对这种默认行为。你可以float而不是使用display: inline，你可以把你所有的li放在一行上没有空格，或者你可以添加一个将 li 拉到一起的负边距。本文比我更好地解释了您的选择:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/