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

那是因为当它们之间没有空格时，它们被认为是一个单词。（想象一个长字，你插入了标记来着色一些字母。你不希望在那里分词。< / em>的）

在第一种情况下，空格（输入/制表符）充当单词边界。

您需要在代码之间引入一些空格，以使父级text-align: justify;等属性生效。

Answer 2

听起来这是正确的行为。请参阅Alignment: the 'text-align' property和Inline formatting contexts：

在'justify'的情况下，此属性指定如果可能，通过扩展或收缩内联框的内容使内联级框与行框的两边齐平，否则对齐初始值。

如果[text-align]属性的值为'justify'，则用户代理也可以在内联框（但不是内联表和内联块框）中拉伸空格和单词。

没有空格，没有理由。

浏览器可以使用letter spacing来证明第二个示例中的单个字。尽管如此，这仍然会导致两种情况的显示文本不同。

问题在于您正在使用的框架，因为它过于急切地删除了空白。要解决这个问题，你应该找到一种方法来保留空白。您可以尝试使用空格字符的unicode html实体： 

两个相同的div除了间距＆amp;缩进 - 为什么它们显示不同？

2 个答案: