列表项之间不需要的空间答案

【问题标题】：Unwanted space between list item列表项之间不需要的空间
【发布时间】：2014-02-17 22:04:51
【问题描述】：

我在每个列表项中都有 div，并且列表项似乎在 IE 和 FF 上的每个列表项之前都有一个空格。我不太确定它为什么会这样做，因为它在 Chrome 上看起来不错。我在网上搜索并尝试将边距和填充设置为 0，并尝试将代码放在同一行，但我似乎无法摆脱 div 上方的空间。我在这里拥有的 div 附加了 jquery，所以我不确定它是否也会以某种方式影响它？我在网上查了一下，有人说只有 li 应该驻留在 ul/ol 中，所以我不确定这是否是不需要空间的另一个原因？

只是想知道是否有人知道是否有办法摆脱不需要的空间？如果没有，我将不得不使用另一种方式（没有列表）来达到预期的结果。

提前致谢。

我的代码

<ol>
<li><div class="doSomething">testing1</div></li>
<li><div class="doSomething">testing2</div></li>
<li><div class="doSomething">testing3</div></li>
</ol>

结果是这样的

1. 
  testing1
2. 
  testing2
3. 
  testing3

【问题讨论】：

div 不能在列表项中（无效的 html）。
先尝试使用normalise.css 之类的东西，看看它在每个浏览器上是否仍然看起来不同
@nevermind 为什么那应该是无效的？ block 里面的list-item 是有效的...
为什么需要divs？
向左浮动内部 div 应该可以解决问题，但我不知道这是否是您想要说服的解决方案

标签： html

【解决方案1】：

我假设这些列表项是 display: inline-block;以下是删除空格的方法：

HTML

<ul>
    <li>Item1</li><!--
    --><li>Item2</li><!--
    --><li>Item3</li>
</ul>

添加这些将使浏览器将该行的其余部分解释为 html 注释，删除不需要的空格

【讨论】：

用 CSS 实现这一点会更聪明。
您必须使用取决于字体大小的负边距，我更喜欢添加 html cmets 而不是使用任意负边距。内联块会将空白空间解释为字符。这是一个小提琴jsfiddle.net/T43TL
您可以使用word-spacing 来实现这一点，没有什么特别的。 jsfiddle.net/T43TL/1
嗯，它在 Chrome 上确实变得凌乱......在 FF 上看起来不错。奇怪的
我想我还需要弄清楚如何在此处正确发布我的 cmets 和问题

【解决方案2】：

~~我不确定在 <li> 元素中包含 <div> 是否真的有效。~~
（我刚刚检查过，根据 OP 上的 cmets，是的，<div>s 在<li> 标签中有效）

但是，忽略这一点，尝试从元素之间删除空格...

<ol>
  <li><div class="doSomething">testing1</div></li
  ><li><div class="doSomething">testing2</div></li
  ><li><div class="doSomething">testing3</div></li>
</ol>

【讨论】：

【解决方案3】：

试试这个。它可能会帮助你。

ol {font-size:0}
ol li {font-size:12px;}

【讨论】：

【解决方案4】：

如果您确实想仅通过 CSS 执行此操作，这是可能的。正如 Jonas Grumann 所指定的，当您使用 inline-block 元素时，就会出现这个问题。它来自浏览器在行内元素之间自动添加的空间。

你可以摆脱它，在父元素上将字体大小设置为 0，然后在子元素上将其重置为正常：

ol {
    font-size: 0;
}

ol li {
    font-size: 14px;/*Or whatever size you need*/
}

但是，我不确定，此解决方案可能对 Android 浏览器的使用有一些问题。

【讨论】：