如何删除列表项之间的空格

问题描述

在现代浏览器中,flex-box是执行此操作的首选方法。就像这样简单:

ul {
  display: flex;
}

对于旧版浏览器的支持,请参考下面的其他选项,尽管稍微复杂一些,但它们仍然不错。

尽管每个其他答案至少提供了一个好的解决方案,但似乎没有一个提供 所有 可能性。这就是我将在这里尝试做的。

首先,要回答关于 为什么 存在间距的隐式问题,它 之所以 存在,是因为您已将LI设置为显示为嵌入式元素。

inline是我所知道的所有浏览器中文本和图像的默认显示值。只要代码中有空格,内联元素就会以它们之间的间隔呈现。当涉及到文本时,这是一件好事:由于我在代码中包含的空格,因此我将这些键入的单词分隔开。每行之间也有间隔。正是内联元素的这种行为使Web上的文本完全可读。

但是有时我们希望非文本元素能够inline利用此显示样式的 其他 属性。这通常包括我们的元素紧密贴合在一起的愿望,这与文本完全不同。这似乎是您的问题。

事不宜迟,以下是我所知道的摆脱间距的所有方法:

保持内联

  1. 不建议 )对LI施加负边距以将其移开。
    li { margin: -4px; }
    

请注意,您将需要“猜测”空间的大小。不建议这样做,因为正如Arthur在下面的注释中所指出的那样,用户可以更改其浏览器的Zoom,这很可能会弄乱代码的呈现。此外,此代码需要太多的猜测和计算。有更好的解决方案可以在所有条件下工作。

  1. 摆脱空白

    <li>One</li><li>Two</li>
    
  2. 使用注释使空白成为注释

    <li>One</li><!--
    

    –>

  3. Two
  4. 跳过结束标记(对HTML4有效]/对[HTML5有效

    <li>One
    

  5. Two
  6. 将空白放在标签本身中( 注意:早期的Internet Explorer不会这样

    <li>One</li
    

  7. Two</li
  8. 利用这样的事实,即元素之间的间距是按父字体大小的百分比计算的。因此,将父级的字体大小设置为0将导致没有空格。只需记住在上设置非零字体大小,以li使文本本身具有非零字体大小。在JSFiddle上查看。

漂浮他们

  1. 浮动他们。如果这样做,您可能需要清除父项。
    li { float: left; display: block; }
    

解决方法

如何摆脱列表项之间的空白?我正在努力使图像彼此相邻。即使我将样式设置为margins: 0;,它们仍然分开。

CSS

ul.frames{
  margin: 20px;
  width: 410px;
  height: 320px;
  background-color: grey;
  float: left;
  list-style-type: none;
}

ul.frames  li {
  display:inline;
  margin: 0;
  display: inline;
  list-style: none;
}

ul.frames li img {
  margin: 0 0 0 0;
}

HTML

<li>
  <img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...