Question

我在每个列表项中都有div，并且列表项似乎在IE和FF上的每个列表项之前都有一个空格。我不太确定为什么会这样做因为它在Chrome上看起来很好。我在网上搜索并尝试将margin和padding置于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

Answer 1

我假设这些列表项是显示的：inline-block;这是你如何删除空间：

HTML

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

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

Answer 2

~~我不确定在<div>元素中<li>实际上是否有效。~~
（我刚检查过，根据对OP的评论，是的，<div>在<li>标签中有效）

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

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

Answer 3

试试这个。它可能对你有帮助。

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

Answer 4

如果您确实想通过CSS执行此操作，则可以。当您使用内联块元素时，会出现此问题，正如Jonas Grumann所指定的那样。它来自浏览器在内联元素之间自动添加的空间。

你可以摆脱它在父元素上将font-size设置为0，然后在children元素上将其重置为normal：

ol {
    font-size: 0;
}

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

但是，我不确定，这个解决方案可能会对Android浏览器的使用产生一些问题。

列表项之间不需要的空间

4 个答案: