Question

我正在使用<ul>创建一个列表，但我需要它“团结”。即使我删除了所有边框，填充和边距，它仍然在图像之间创建一个空格。我该如何删除它？

<h4>An Unordered List:</h4>
<ul>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
</ul>
<ul>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
  <li><img class="nomarge" ..../></li>
</ul>

CSS

ul {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border:  0px 0px 0px 0px;
    display: table;
    table-layout: fixed;
    display: inline;
}

li {
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;  
    display: table-cell;

}

Answer 1

使用此css：

img{ display: block;}

Answer 2

img标记上设置的样式有哪些？您也应该将它们设置为0。顺便说一下，如果你用css为元素的所有边（顶部，底部，左边，右边）设置像素尺寸，你可以简单地用0（没有单位）而不是重复{{ 1}}四次。

那是：

0px

Answer 3

您需要将display: table-cell;用于UL元素。这就是我所取得的成就。

http://jsfiddle.net/REmUC/

Answer 4

添加img { vertical-align: sub; }，它应该有效。

ul {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border:  0px 0px 0px 0px;
    display: table;
}

li {
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;  
    display: table-cell;
}

img {
    vertical-align: sub;
}

http://jsfiddle.net/pulleasy/Cw3Gj/

Answer 5

图像之间的差距来自vertical-align: baseline;默认分配的所有图像（内联块元素）。这样，图像与普通文本位于同一行。这可能很有用，但不在您的用例中。

将此属性设置为middle以避免此问题：

img {
    vertical-align: middle;
}

Answer 6

试试这个CSS：

ul {
    padding: 0px;
    border:  0px;
    display: table;
    table-layout: fixed;
    display: inline;
}

li {
    padding: 0px;
    border: 0px;
    display: table-cell;
    border-spacing: 0px 0px;
    border-collapse: collapse;
}
img {
    padding: 0px;
    margin: 0px;
}

删除ul之间的空格

6 个答案: