在缩小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

您可以在每个列表项之后添加一个空格作为生成的内容，但是列表项需要作为内联元素而不是内联块进行布局，以使空间在对齐中起作用：

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

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

原始答案，在学习理由中的内联和内联块元素之间的差异之前编写;留在这里供参考：

不，如果您已经“缩小”HTML代码以便删除元素之间的空格，则无法使这些元素在对齐中充当“单词”。这种“缩小”通常会改变实际内容而不应该这样做 - 将元素间空格折叠为一个空白字符是可以的，但不能更多。

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

所以你应该使用更合适的缩放器，或者使用你正在使用的缩放器的设置，这样它就不会删除元素间的空白。

Answer 2

解决此问题的一种方法是使用边距或填充

来区分li元素

li {
   margin: 0 10px;
}