相当于向左浮动和隐藏溢出

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>

这正是我想要的外观，带有复选标记的 "column" 这样文本就不会在下面换行。

这个 HTML/CSS 完全可以正常工作，但出于好奇，我尝试通过将  标记从 float: left 更改为 CSS 来实现相同的布局至 display: inline-block。但是，这会导致整个文本块在复选标记下方换行。有没有另一种方法可以在不使用浮动的情况下完成屏幕截图中的布局？

编辑：

我刚刚尝试同时提供  和  标签 display: inline-block，但这没有用。它导致  文本环绕在  图标下方。

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

Answer 1

默认情况下， 是内联元素，而  是块级元素，占据浏览器的整个宽度 window。如果您将  设置为内联块，那么后续块级元素即  将放在下一行，因此您也需要在 p 上设置内联块属性。在另一种方式中，您可以使用 float: left on  和 overflow: hidden on 。它也可以正常工作...

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

像这样向两个元素添加一些最大宽度  和 vertical-align: top;。 http://prntscr.com/a6ten4 当  中的内容变得太多时，它会导致  下降到以下。所以应用最大宽度来防止这种情况...

相当于向左浮动和隐藏溢出

Equivalent to Float Left and Overflow Hidden

css

css-float