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

Question

我有一个无序列表，我需要将其放在 div 中居中，但也需要并排。为此，我使用了 text-align: center;在 div 上，以及 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 文档看起来整洁。

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