如何在同一行显示文本和图标

Posted 2023-02-24

【中文标题】如何在同一行显示文本和图标

【英文标题】：How to display text and icon on the same line

【发布时间】：2018-06-07 02:50:36

【问题描述】：

我正在使用 bootstrap 4 和 fontawesome，并希望在同一行显示文本和图标。文本应该在左上角，而图标在右下角。目前，我无法将文本和图标保持在同一行，图标似乎移动到文本下方的一行。我该如何解决这个问题？

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-header">
      <span class="d-inline">Cars waiting pedestrians cross the street</span>
      <span class="d-inline btn d-flex justify-content-end">
          <i class="fas fa-angle-down"></i>
      </span>
    </div>

【参考方案1】：

试试这个。 我删除了 d-flex，将 justify-content-end 替换为 float-right 和 d-inline 到 d-inline-block

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-header">
      <span class="d-inline-block">Cars waiting pedestrians cross the street</span>
      <span class="d-inline-block btn float-right">
          <i class="fas fa-angle-down"></i>
      </span>
  </div>

【讨论】：

这个解决方案很完美

【参考方案2】：

这会有帮助吗？

<div class="card-header">
  <span class="d-inline">Cars waiting pedestrians cross the street

    <span class="d-inline btn float-right">
      <i class="fas fa-angle-down"></i>
   </span>

  </span>
</div>

编辑：根据 html 规范，在跨度内有跨度是有效的。阅读此 SO Post Can you have <span> within <span>?，了解有关创建嵌套 span 的更多信息。

编辑 2：向内部跨度添加类 float-right 以使箭头出现在右侧

【参考方案3】：

Font Awesome 现在有一种本地方式来执行此操作。如果您只是在这里看到他们的文档，您可以在 <ul> 标记和 <li> 标记中添加一个类，并将它们放在一起！

https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list

【讨论】：

欢迎来到 Stack Overflow！请注意，该问题提出了不同的挑战。要求不要创建带有任意图标的列表，而是将带有所需图标的块放置在文本的右侧。