内联块元素之间的空格？

Question

我在网站横幅 HERE 上创建了一个非常简单的点导航。我使用的HTML代码如下：

<ul class="carousel-dots">
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li class="active">
        <a href=""></a>
    </li>
</ul>

现在对于<li>元素，我有以下代码：

.banner ul.carousel-dots li {
    height: 13px;
    width: 13px;
    display: inline-block;
    background: url(../img/res/carousel-dots.png) 0 0 no-repeat;
    margin: 0;
    cursor: pointer;
}

现在即使我的风格margin: 0;，我在左右之间有一个边距，我不知道这些空间来自哪里，我希望每个点都能触及其他，并排。那么什么造成了这个神秘的边缘？

Answer 1

内联块元素之间的空格？

空间实际上是通过元素之间的“输入”创建的。

How to remove the space between inline-block elements?

在上面的问题中，如何删除它有很多不同的答案我将父元素font-size设置为0。

ul {
  font-size: 0;
}
ul.carousel-dots li {
  height: 13px;
  width: 13px;
  display: inline-block;
  /*background: url(../img/res/carousel-dots.png) 0 0 no-repeat;*/
  background-color: black;
  border-radius: 50%;
  margin: 0;
  cursor: pointer;
}

<ul class="carousel-dots">
  <li>
    <a href=""></a>
  </li>
  <li>
    <a href=""></a>
  </li>
  <li class="active">
    <a href=""></a>
  </li>
</ul>

Answer 2

好的，答案有点棘手，如果你想修复它，你必须删除<?xml version="1.0" encoding="UTF-8" ?> <xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:exsl="http://exslt.org/common" exclude-result-prefixes="exsl"> <xsl:output method="html" indent="yes"/> <xsl:variable name="data"> <div id="container"> <div id="menu"> <ul> </ul> </div> </div> </xsl:variable> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:variable name="data2"> <xsl:apply-templates select="exsl:node-set($data)/node()"/> </xsl:variable> <xsl:template match="div[@id = 'menu']"/> <xsl:template match="/"> <xsl:copy-of select="$data2"/> </xsl:template> </xsl:transform>和下一个</li>

之间的空格

所以，这个：

<li>

应该成为这个：

<ul class="carousel-dots">
<li>
    <a href=""></a>
</li>
<li>
    <a href=""></a>
</li>
<li class="active">
    <a href=""></a>
</li>

这个问题的原因是当使用内联块时，空格也被认为是内联字符，在它们之间留下空间。

PS：还有其他方法可以通过使用字间距或其他类似的东西来移除空间，但我发现最简单的解决方案始终是最好的，再加上html，你应该总是尽量在发货之前尽量减少你的代码因此，<ul class="carousel-dots"> <li> <a href=""></a> </li><li> <a href=""></a> </li><li class="active"> <a href=""></a> </li>以下的几行总是好于几行

导航点的神秘边缘

2 个答案:

内联块元素之间的空格？