Html 内联块列表项之间的空格

可能重复：

为什么内联阻止列表项中有空格？无论我如何将我的列表项添加到菜单中，我总是得到空格

li{
边框：1px纯黑；
显示：内联块；
高度：25px；
列表样式类型：无；
文本对齐：居中；
宽度：50px；
}
保险商实验室{
填充：0；
}

一个
两个
三

我以前看到过这一点并回答过：

等我 发现

内联块

是一个 依赖于空格的方法及其应用 取决于字体设置。在这种情况下，将渲染4px

为了避免这种情况，您可以运行所有

li

s在一行或一个块中 将结束标记和开始标记放在一起 像这样：

---

这有利于HTML的可读性（避免同时运行标记等）。间距效果是因为字体的间距设置，所以您必须为内联元素重置它，并为其中的内容再次设置它。

我将添加float left的CSS属性，如下所示。这样就没有多余的空间了

ulli{
浮动：左；
}

解决方案：

ul{
字号：0；
}
ulli{
字体大小：14px；
显示：内联块；
}

---

您必须将父字体大小设置为0

实际上，这并不特定于

显示：内联块

，但也适用于

显示：内联

。因此，除了David Horák的解决方案外，这一方案也有效：

ul{
字号：0；
}
ulli{
字体大小：14px；
显示：内联；
}

只需删除html代码中li之间的分隔符即可。。。

---

将li仅放在一行中。

另一种解决方案，类似于，但这也适用于相对字体大小

ul{
字母间距：-1em；/*有效折叠空白*/
}
ulli{
显示：内联；
字母间距：正常；/*将字母间距重置为正常值*/
}

即使它不是基于

内联块的，这个解决方案也可能值得考虑（允许从上层进行几乎相同的格式化控制）



相对/固定字体大小独立
HTML代码格式独立（无需粘合

）

---

我也有同样的问题，当我在菜单上使用内联块时，我在每个“li”之间都有空格，我找到了一个简单的解决方案，我不记得在哪里找到的，反正我就是这么做的

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

在“li”的两端和开头之间添加一个注释符号 然后水平空间消失了。 希望你能回答这个问题

---

---

谢谢

当你说空间“在他们里面”是什么意思。空格字符在

标记之间？仅供参考：此处的html无效。您没有

或。它在哪里有空间？请添加一个屏幕截图或演示，您指的是每个元素之间的水平空间。如果这样做，您可以在菜单#headerMenu li definition中将边距和填充重置为0，并删除宽度100px；是的，空格字符位于

标记之间。关于

之类的，谢谢。我忘了标签已经被弃用了。无论如何，空格仍然适用于
• 标记。我更新了代码以去除所有不必要的代码，以帮助您了解发生了什么。我从没想过。有道理。我不支持这个答案的唯一原因是我不能使用百分比或ems作为列表中字体大小的计量单位。我可以用JavaScript解决这个问题，但这并不理想。很好的解决方案，使用了我复杂的2级水平弹出菜单。这种方法的大小是你不能使用em或%这个技巧对Safarit不起作用。这是一个比将所有
  放在一行中/删除空白更优雅的解决方案，因为人们不一定每次都能访问标记。实际上这是由于单词间距，因此4px取决于字体设置。见凯尔，你能更新你的答案吗，这样你就不会给别人错误的信息了？不向内联块元素添加4px边距。正如Anzeo提到的，这是由于元素之间的空间被渲染。“margin”一词在CSS中有特定的含义，它会误导其他人不理解问题的本质。我知道已经两年了，但这是更好的方法，也许渲染引擎现在不同了。如果你不想这样做，我发现去掉
  元素的结尾标记也可以解决问题。它仍然被认为是格式良好的HTML。但是，这是最好的语义结果吗，同时运行LI标记？但是您不能在这个解决方案中使用相对字体大小。但是，是的，我自己也考虑过这一点您可以始终使用

  rem

  s，并为传统浏览器提供像素级的回退。我做到了，这很有魅力。我不是选民中的一员，但不要粗鲁，这个问题已经得到了回答。天哪。多少个星期以来，我一直在为LI符号和后面的文字之间的断线而头痛。顺便说一句，这个断线只发生了可笑的大变焦。你是我的英雄！我知道我参加聚会迟到了，但这个解决方案虽然消除了
  之间的间距，但它引入了另一个潜在问题：您无法将列表项居中并右对齐。如果您尝试执行

  float:right
  

  上的code>，则它们的顺序将被交换，这意味着：列表中的第一项将是最后一项，第二项是最后一项之前的一项，依此类推。感谢您提供此解决方案。将字体大小设置为零，即使只是针对UL，也会导致布局出现问题，因为我在某些地方使用em大小。

  ul {
      font-size: 0;
  }
  
  ul li {
      font-size: 14px;
      display: inline-block;
  }
  

  ul {
    display: table;
  }
  ul li {
    display: table-cell;
  }
  

  <li><a href="index.html" title="home" class="active">Home</a></li><!---->
  <li><a href="news.html" title="news">News</a></li><!---->
  <li><a href="about.html" title="about">About Us</a></li><!---->
  <li><a href="contact.html" title="contact">Contact Us</a></li>