UL-LI强制间距？

Question

我正在尝试制作一个简单的导航栏。

这是我的HTML：

<div id="navbar">
    <ul>
        <li>123</li>
        <li>1234</li>
    </ul>
</div>

和我的CSS：

#navbar ul {
    list-style:none;    
}
#navbar ul li {
    display:inline;
    background:green;
    margin:0px;
}

如您所见，li margin设置为0px，但li之间仍有间隔。我研究过它，但没有发现任何有用的东西。

如何摆脱那个间距？并且可选：那个间距是多少？

Answer 1

内联或内联块级元素周围的空格？

这个间距来自于您将列表项视为内联元素这一事实：因此，它们之间的任何空格都将被处理并折叠成一个空格键字符。有几种方法可以解决这个问题，Chris Coyier写了一篇非常好的文章：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

一种方法是删除<li>元素之间的任何空格：使用HTML注释，或者直接删除它们：

<div id="navbar">
    <ul>
        <li>123</li><!--
        --><li>1234</li>
    </ul>
</div>

...或

<div id="navbar">
    <ul>
        <li>123</li><li>1234</li>
    </ul>
</div>

---

的变通方法

但是，我建议您考虑使用浮点数或最新的CSS3 flexbox规范来创建水平菜单。在答案结束时，这两种解决方法都可以作为代码片段提供......但请允许我解释建议的解决方案：

不推荐：在父元素

中使用font-size: 0

虽然快速简单的修复，但此解决方案会对使用相对字体大小的布局（例如%和ems）造成问题，因为字体大小将相对于父级＆＃39;而计算。 s字体大小。 0的任何内容的比例，产品或分区都会给0。但是，如果您使用的px，rem，vh，vw，vmax或vmin不依赖于基于父级的计算元素的字体大小，没关系。

浮筒

浮点数非常有用，更重要的是，易于理解和widely supported across virtually ALL browsers（如果IE4.0可以支持它，我怀疑今天的所有浏览器都可以）。但是，有一个问题是，当父元素的所有直接后代都浮动时（就像我们将<li>中的所有<ul>元素浮动一样），父级的维度将会崩溃。

一个受欢迎的修复方法是overflow: hidden（有关详细的机制解释，请参阅this article）或clearfix solution。原因很简单：浮动元素从正常文档流中取出。

CSS3 flexbox规范

这是一个相当新的标准，但与传统的CSS浮动相比，它具有极大的灵活性。唯一的缺点是新语法需要时间来学习（尽管有许多教程可以帮助您 - this，this和this），并且它是{{3在最常用的浏览器上使用。

要避免元素之间的间距，您必须：

• 使用flex-grow: 1
拉伸元素
• 避免对space-around
使用space-between或justify-content

......或其组合。

---

解决方案演示

不用多说，以下是代码段中的两种可能的解决方法：

＆＃13;

＆＃13;

ul {
  background-color: #eee;
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  }
ul li {
  margin: 0;
  }

#navbar1 ul {
  /* To prevent parent collapse when children are floated */
  overflow: hidden;
  }
#navbar1 ul li {
  float: left;
  }

#navbar2 ul {
  display: flex;
  }

＆＃13;

<div id="navbar1">
<p>Solution 1: Use floats.</p>
    <ul>
        <li>123</li>
        <li>1234</li>
    </ul>
</div>

<div id="navbar2">
<p>Solution 2: Use CSS3 flexbox.</p>
    <ul>
        <li>123</li>
        <li>1234</li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用float代替：

#navbar ul li {
    float: left;
    background:green;
    margin:0px;
}

Answer 3

此问题的一个简单解决方法是在父级上使用font-size: 0;，并在font-size上声明<li>。

#navbar ul {
    list-style:none;
    font-size 0; //removes the extra space//
}

#navbar ul li {
    display:inline;
    background:green;
    margin:0px;
    font-size: 12px;
}

我个人解决这个内联空白问题的方法是为<li>添加负余量

#navbar ul li {
    display:inline;
    background:green;
    margin: 0 -4px 0 0; //removes the extra space//
}

另一种选择是浮动子元素，但是你需要用overflow: hidden清除父元素上的浮点数。

#navbar ul {
    list-style- none;
    overflow: hidden; //clear the floats//
}


#navbar ul li {
    margin: 0 5px 0 0; //provides spacing between elements//
    background:green;
    float: left;
}