css - 两个相同的 div，除了间距和缩进——为什么它们显示不同？

Question

我正在尝试使用 text-align:justify 在另一个 div 中平均间隔 div。出于某种原因，如果 html 缩进但不缩进，它就可以工作。不幸的是，我正在处理的应用程序经常使所有 html 在一个大字符串中一起运行，所以我需要弄清楚如何。

这里有一个代码笔的链接，有两个问题: http://www.codepen.io/evanhobbs/pen/LDgJc

代码如下:

1- 与数字 2 相同，但具有所有间距/缩进

<div class="equal-justify-wrapper">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <span class="equal-justify-stretcher"></span>
</div>

2-。与数字 1 相同，但删除了所有间距/缩进

<div class="equal-justify-wrapper"><div>one</div><div>two</div><div>three</div><span class="equal-justify-stretcher"></span></div>

CSS

.equal-justify-wrapper {
  list-style: none;
  background-color:red;
  text-align: justify;
   -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.equal-justify-wrapper > div {
     width: auto;
    //height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    background: #000;
    color: yellow;

}

.equal-justify-stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

Answer 1

那是因为当它们之间没有空格时，它们被认为是一个单词。(想象一个长单词，您在其中插入了标签以使某些字母着色。您不希望单词在那里拆分。)

在第一种情况下，空格 (enter/tab) 充当单词边界。

您需要在标签之间引入一些空白，以便父级上的 text-align: justify; 等属性生效。