1

我正在使用创建一个列表<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;

}
4

6 回答 6

8

使用这个 CSS：

img{ display: block;}
于 2013-06-05T14:11:06.930 回答
2

img标签上设置的样式是什么？您也应该将它们设置为 0。顺便说一句，如果您使用 css 为元素的所有边（顶部、底部、左侧、右侧）设置像素尺寸，您可以使用 just 0（无单位）的简写，而不是重复0px四次。

那是：

border: 0;
padding: 0;
margin: 0;
于 2013-06-05T14:08:36.520 回答
2

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

http://jsfiddle.net/REmUC/

于 2013-06-05T14:14:15.250 回答
1

添加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/

于 2013-06-05T14:18:44.953 回答
1

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

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

img {
    vertical-align: middle;
}
于 2013-06-05T14:18:53.187 回答
1

试试这个 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;
}
于 2013-06-05T14:22:42.257 回答