html - 为什么等间距菜单的“文本对齐：对齐”方法不起作用？

Question

Patrick Kunka 的博文 Text-align: Justify and RWD描述了一种均匀间隔元素的干净方法。

大多数时候它对我有用，但有时它没有——我不明白为什么。但最后我偶然发现了一个解释，并决定创建这个自我回答的帖子。

考虑以下 HTML：

<ul id="Grid">
        <li></li><li></li><li></li><li></li><li class="break"></li>
</ul>

下面的 CSS（直接取自博文，除了我添加了边框和背景以使元素可见，还添加了列表的重置）：

#Grid{
    text-align: justify;
    font-size: 0.1px; /*hide whitespace between elements*/
    width: 400px;
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

#Grid li{
    display: inline-block;
    width: 23%;
    height: 10px;
    background-color: red;
    border-right: 3px green solid;
}

#Grid .break{
    width: 100%;
    height: 0;
    ...
}

JSFiddle

该text-align属性没有任何影响。为什么？

Answer 1

标记中的元素之间必须有空格（空格或换行符）。

<ul id="Grid">
    <li></li> <li></li> <li></li> <li></li> <li class="break"></li>
</ul>

JSFiddle

---

我遇到这个问题的主要是 PHP 生成的标记，它缺少通常的格式。例如，这经常发生在使用foreach.