为什么我的父元素包装了最后一个单词？ （里面的浮动元素）

Question

我有3个浮动<li>，没有确定宽度（响应式设计）。在每个<li>内，我右侧有一个浮动图标+信息。

正如你所看到的，＆＃34; route＆＃34;换行，即使<li>元素在右边有足够的空间（红色矩形显示＆＃34;容器＆＃34; <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;
}

浮动图标是通过font-awesome生成的，它们具有类.pull-left，使它们浮动。如果我删除.pull-left，则<li>正常工作。

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

PS：我知道我可以用white-space:nowrap解决这个问题，但我真的想知道＆＃34;原因＆＃34; ：）

THX！

Answer 1

The problem seems to be caused by the nested floats: the li is floated left, and the .fa-pull-left icon inside is also floated left.

My guess is that the li's width is calculated first, as if there were no floated span inside, and then the span is applied, leaving not enough room inside the rest of the li, causing the content to wrap.

If someone can come up with a better explanation, I'd be delighted!

Anyway, the solution is to not float the inner span. One example of a working solution would be to give the li some padding and position the span absolutely inside the padding.

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

(Sorry for not posting all the code in here, but I had to copy FontAwesome's css into the fiddle, so it's a bit much.)