Question

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

<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>

＆＃13;

Answer 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帖子Can you have <span> within <span>?，了解有关创建嵌套span。

的更多信息

编辑2：向内部跨度添加了一个浮动右侧的类，以使箭头显示在右侧

Answer 3

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

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

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

3 个答案: