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

Question

我正在使用 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>

Answer 1

试试这个。我删除了d-flex，用float-right 和d-inline替换justify-content-end到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>