html - 当 HTML 缩小时，是否有一种有效的方法可以在列表项之间强制使用空格？

Question

我正在尝试使用 text-align: justify; 来分隔列表项。 ( LIKE THIS )

问题是我的 HTML 缩小了 - 它删除了列表项之间的空格并破坏了 text-align: justify; 效果 ( LIKE THIS )

所以通常我通过在元素之间添加一个   字符来解决这个问题——确保保留我的空白。

虽然这实际上也适用于列表项 (LIKE THIS - (the last demo there))，但这里的问题是在列表项之间添加   是无效的 HTML -

我尝试了 html validator - 我得到了这个错误:

还有一件事:我不能将 display:flex; 与 justify-content : space-between; 一起使用，因为我需要支持 IE9

有什么想法吗？

Answer 1

您可以在每个列表项之后添加一个空格作为生成的内容，但是列表项需要作为内联元素而不是内联 block 进行布局，以便使空格在对齐时很重要:

.nav li {
    display: inline;
}
.nav li:after {
    content: " "; /* a regular space */
}
.nav li a {
    display: inline-block;
}

上面的最后一条规则处理链接可能包含空格的问题，您可能不希望它们被拉伸(stretch)(如果元素是内联的，它们就会被拉伸(stretch))。

原始答案，在学习justification中inline和inline block elements的区别之前写的；留在这里供引用:

不，如果您“缩小”了 HTML 代码以便删除了元素之间的空格，则您不能使元素充当“单词”以证明其合理性。这种“缩小”通常会改变实际内容，不应该这样做——将元素间的空白压缩为一个空白字符是可以的，但不能更多。

原因是对齐算法只识别实际内容中的空格。因此，添加空格作为生成的内容无济于事。

因此您应该使用更合适的缩小器，或者使用您正在使用的缩小器的设置，这样它就不会删除元素间的空白。