Question

我有一个无序列表，我需要在div中居中，但也是并排。为此，我在div上使用了text-align: center;，在列表项上使用了display: inline-block;。但是，当我这样做时，列表项之间会出现一些空格。 Here is a demo

HTML

<div class="wrap">
    <ul>
      <li>hello</li>
      <li>buddy</li>
      <li>good</li>
      <li>morning</li>
    </ul>
</div>

CSS

li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    border: 1px solid green;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 95%;

}

div.wrap {
    width: 500px;
    border: 1px solid red;
    text-align: center;
}

Answer 1

问题来了，因为当设置为display: inline-block时，元素现在被视为单词，因此元素之间的换行符被视为空格。

您有几个选项，1是删除元素之间的换行符：http://jsfiddle.net/26eg9/8/

或者您也可以将父元素中的字体大小设置为0并在列表项中重置为：http://jsfiddle.net/26eg9/3/

我个人更喜欢第二种，因为它使HTML文档保持整洁。

编辑：通过将新行放在列表项中，可以在第一个选项中保留新行，但我仍然认为这看起来很草率

Answer 2

内联元素尊重空格。从字面上删除标记中的空格。

jsFiddle example - 他们之间没有空格

更新了HTML

<div class="wrap">
    <ul>
    <li>hello</li><li>buddy</li><li>you</li><li>stink</li>
    </ul>
</div>

有替代方法，例如using negative margins (example)或setting the parent's font-size to 0px (example)，然后重置孩子。但是，跨浏览器支持的最佳解决方案是删除标记中的空格。

Answer 3

空格来自换行符 - HTML将新行解释为单个空白字符。

有很多方法可以解决这个问题 - 您可以向li元素添加一个浮点数，从标记中删除空格，负边距等。在您的情况下最有用的方法是将font-size: 0添加到容器中（我将其设置为包裹div，但如果需要，可以在ul上执行此操作），然后为{font-size显式设置li {1}}而不是。

li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    border: 1px solid green;
    font-size: 16px;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 95%;

}

div.wrap {
    width: 500px;
    border: 1px solid red;
    text-align: center;
    font-size: 0;
}

Here is an updated JSFiddle

Answer 4

我遇到了同样的问题，上述解决方案都无法解决问题。但我发现这对我有用：

而不是：

<ul>
    <li>hello</li>
    <li>buddy</li>
    <li>good</li>
    <li>morning</li>
</ul>

像这样建立你的HTML代码：

<ul>
    <li> hello </li>
    <li> buddy </li>
    <li> good </li>
    <li> morning </li>
</ul>

如何删除具有内联块样式的列表项之间的空格

4 个答案: