Question

我知道这一定是问题最多的问题之一，但我真的很想理解 - 为什么合理的网格菜单必须在<li>元素之间留一个空格？

我在这里做了一个例子：http://jsbin.com/oNibesA/1/edit

CSS：

.inline-list {
    text-align: justify;
    list-style: none;
    margin: 0;
    padding: 0;
}

.inline-list:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.inline-list li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.inline-list li:before {
    content: ' ';
}

.inline-list li a {
    display: block;
    padding: 5px 10px;
}

此HTML（带空格）工作正常 - 它将元素均匀分布在一行中：

<ul class="inline-list">
    <li><a>Everything</a></li>
    <li><a>Is</a></li>
    <li><a>Fine</a></li>
    <li><a>With</a></li>
    <li><a>Multiline</a></li>
    <li><a>HTML</a></li>
</ul>

但是这个HTML（所有在一行中没有空格）不会均匀分布：

<ul class="inline-list"><li><a>This</a></li><li><a>Is</a></li><li><a>A</a></li><li><a>Weird</a></li><li><a>CSS/HTML</a></li><li><a>Bug</a></li></ul>

现在我知道它发生了，但我很好奇 - 为什么它会发生？你可以通过使用CSS以某种方式解决这个问题（例如，在<li>元素之间放置空格）吗？

Answer 1

为什么对齐网格菜单必须在<li>元素之间有空格？

那是因为对于那个空间，每个inline-block被认为是一个分离的元素，假设在对齐的情况下，空间被渲染并且用于将每个元素设置为单个单词。然后证明可以完成他的工作。

如果你删除这个空间就好像你在一起所有的块，就像一个单词一样，并证明可以打破它。

修改

正如您在此 Demo Fiddle 上看到的那样，如果您保存该空白inline-block可以作为单个字工作，则其他属性如letter-spacing和word-spacing还修改了内联块行为。

Answer 2

因为不同单词之间没有空格，所以它们被视为一个单词。 justify对一个单词没有任何影响，因为它会改变单词之间的空格。

Answer 3

如果您缩小HTML，display:flex;会成为替代方案吗？ http://jsbin.com/oMIdODaZ/1/

.inline-list {
  margin: 0;
  padding: 0;
  display:flex;
  justify-content : space-between;
}


li {
  display:inline-block;
  background:gray;
}

限制此时间：http://caniuse.com/flexbox

为什么合理的CSS网格菜单必须在li元素之间有空格

3 个答案: