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填充列表时经常会发生这种情况。

为什么“均匀间隔”菜单的“text-justify：align”方法不起作用？

1 个答案: