两个浮动的li元素之间的匿名空间

Question

我正在创建一个应用程序的标题，我发现了一个奇怪的问题，这在以前从未发生过。问题是，我有两个列表内部标题，一个浮动到左边，一个到右边，所有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/

Answer 2

只需添加float: left;并减少padding，此处为 FIDDLE

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

*注意：inline＆amp;上总是添加宽度约为4px的水平空间。 inline-block个元素，并确定您必须float他们或为这些元素编写HTML代码。

Answer 3

这是由display: inline;。

引起的

正在发生的事情是lis被视为角色之间的空格。

要防止这种情况，请将font-size: 0;添加到父ul，然后将font-size: 16px;添加到lis。

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

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

JSFIDDLE

关于您可以使用哪些选项，这是一个很好的article。

Answer 4

将ul li设为float:left;，并将line-height设为25，而不是header ul

中的35

Answer 5

添加以下CSS代码为我修复了它：

header ul.left li {
    display:block;
    margin: 0;
    float: left;
    line-height: 25px;
}