html - 为什么我的父元素将最后一个字换行？ (内部 float 元素)

Question

我有 3 个 float <li> ，没有确定宽度(响应式设计)。每个内部 <li> ，我右边有一个 float 图标+信息。

如您所见，“路线”一词换行，即使 <li>元素在右侧有足够的空间(红色矩形显示“容器” <div> )

这是 HTML(已清理)+ CSS:

        <div class="row">
            <div class="columns twelve">
                <ul class="quick-infos">
                    <li>
                        <span class="fa fa-phone fa-2x fa-pull-left"></span>
                        VICTORIAVILLE<br />
                        819 357-2494
                    </li>
                    <li>
                        <span class="fa fa-phone fa-2x fa-pull-left"></span>
                        DRUMMONDVILLE<br />
                        819 479-8008
                    </li>
                    <li>
                        <span class="fa fa-quote-left fa-2x fa-pull-left"></span>
                        Service routier 24 H<br />
                        Camion lourd, agricole et hors route
                    </li>
                </ul>
            </div>
            <div class="columns four">
                Other things here...
            </div>
        </div>

CSS:

ul.quick-infos li {
    float:left; 
    margin-right:3em;
}

float 图标是通过 font-awesome 生成的，它们的类是 .pull-left这让他们漂浮。如果我删除 .pull-left , <li>工作正常。

所以，我想知道为什么我的 <li>元素未正确呈现宽度...

PS:我知道我可以使用 white-space:nowrap 来解决这个问题，但我真的很想知道“原因”:)

谢谢!

Answer 1

问题好像是嵌套 float 引起的:li向左浮动，里面的.fa-pull-left图标也向左浮动。

我的猜测是先计算li的宽度，好像里面没有 float span，然后应用span，留的空间不够在 li 的其余部分内，导致内容换行。

如果有人能提出更好的解释，我会很高兴!

无论如何，解决方案是不 float 内部跨度。一个可行的解决方案示例是为 li 提供一些填充并将 span 绝对定位在填充内。

ul.quick-infos {
  padding: 0;
  margin: 1em 0;
  list-type: none;
}

ul.quick-infos > li {
  margin: 0 !important;
  padding: 0 3em;
  position: relative;
  float: left;
  list-style: none;
}

ul.quick-infos > li>span.fa-pull-left {
  position: absolute; left: 0; top: 0;
  float: none;
}

Working fiddle

(很抱歉没有在这里发布所有代码，但我不得不将 FontAwesome 的 css 复制到 fiddle 中，所以它有点多。)