2

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

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;
}
4

4 回答 4

3

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

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

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

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

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

于 2013-11-11T18:37:14.083 回答
2

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

jsFiddle 示例- 它们之间没有空格

更新的 HTML

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

还有其他选择，例如使用负边距（示例），或将父级设置font-size为 0px（示例），然后重置子级。但是，跨浏览器支持的最佳解决方案是删除标记中的空白。

于 2013-11-11T18:34:54.973 回答
0

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

有很多方法可以解决这个问题 - 您可以向li元素添加浮点数，从标记中删除空格，负边距等。在您的情况下似乎最有用的方法是添加font-size: 0到容器中（我做到了到换div行，但ul如果需要，您可以改为），然后为sfont-size显式设置。li

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;
}

这是一个更新的 JSFiddle。

于 2013-11-11T18:39:05.683 回答
-1

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

而不是这个：

<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>
于 2014-10-10T20:09:53.180 回答