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

我有一个小的引导/Font-Awesome警报，如下所示：

它的HTML如下所示（我内联了定制CSS只是为了问我的问题）：

{{$discount}

这正是我想要的外观，在它自己的“列”中有复选标记，这样文本就不会在下面环绕

这个HTML/CSS的工作原理完全一样，但出于好奇，我尝试通过将

标记CSS从

float:left

更改为

display:inline block

来实现相同的布局。但是，这导致整个文本块在复选标记下换行。在我的屏幕截图中，有没有其他不使用浮动来完成布局的方法

---

编辑：

我只是试着同时给出

和

标记

显示：内联块

，但没有成功。它导致

文本环绕在

图标下方

我在这里放了一个jsfiddle来使用它：

默认情况下

是一个内联元素，而

是一个块级元素，占据整个浏览器窗口的宽度。如果将

设置为内联块，则随后的块级元素，即

将放在下一行中，因此您也需要在

p

上设置内联块属性。

---

通过另一种方式，您可以使用float:left on

和overflow:hidden on

。它也可以正常工作。

您可以使用

display:table

和

display:table cell

进行操作。例如：

.alert{
  display: table;
}

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

---

在

和
垂直对齐：顶部添加一些最大宽度。
当
中的内容变得太多时，会导致
下降到下面。
因此，在
i
和
p
元素中应用最大宽度以防止出现这种情况…
Add
display:inline block
。它在您的小提琴链接中看起来与您期望的图像一样好。看看它在我屏幕上的样子是的，小提琴看起来不错。我只是好奇，想知道是否有一种不用花车的方法。我总是在寻找多种做事方式：）检查我的答案。有另一种方法可以解决问题。不要忘记接受任何通过点击右边的符号来解决问题的答案。
.alert{
  display: table;
}

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