相当于Float Left和Overflow Hidden

Question

我有一点Bootstrap / Font-Awesome警告，如下所示：

它的HTML看起来像这样（我内联自定义CSS只是为了问我的问题）：

<div class="alert alert-success" role="alert">
    <i class="fa fa-check" style="float: left; margin-right: 10px;"></i>
    <p style="overflow: hidden;">{{ $discount }}</p>
</div>

这是我想要的精确外观，在其自己的“列”中使用复选标记，以便文本不会在下面换行。

此HTML / CSS工作原理完全正常，但只是好奇，我尝试通过将<i>标记CSS从float: left更改为display: inline-block来完成相同的布局。但是，这会导致整个文本块包含在复选标记下方。是否有其他方法可以在不使用浮动的情况下完成屏幕截图中的布局？

编辑：

我刚尝试同时提供<p>和<i>代码display: inline-block，但这不起作用。它导致<p>文本包含在<i>图标下方。

我在这里放了一个jsfiddle来玩它：https://jsfiddle.net/9c7ym3sk

Answer 1

默认情况下，<i>是内联元素，而<p>是块级元素，占据浏览器窗口的全宽。如果将<i>设置为内联块，则后续块级元素（<p>将在下一行中删除，因此您还需要在p上设置内联块属性。 换句话说，您可以在<i>上使用float：left并在<p>上使用overflow：hidden。它也可以正常工作......

Answer 2

您可以使用display:table和display:table-cell。如下：

.alert{
  display: table;
}

.fa{
  display: table-cell;
  vertical-align:top;
}
p{
  display: table-cell;
  padding-left:5px;
}

<强> Fiddle

Answer 3

向这两个元素添加一些最大宽度<p>和vertical-align: top;。 http://prntscr.com/a6ten4 当<p>内的内容变得过多时，会导致<p>降到下方。 因此，应用max-width来防止这种情况......