如何在同一行中成像和跨越

Question

如何在同一基线显示跨度的图像？

我正在使用Bootstrap 4来实现这一目标。

<li class="nav-item active">
    <a class="nav-link" href="#">
       <img src="img/basket-35.png" alt="Shopping Cart" style="width: 25px;"> 
       <span class="align-bottom">Cart</span>
   </a>
</li>

但是它像一个又一个地来了。篮子升了，推车在推车的底部！

不在一行。 display: flex;将使它们排成一行，但不在同一底行。

Answer 1

您的问题必须由封闭元素或自定义CSS引起。

以下内容使用默认的Bootstrap 4.4.1在同一行中显示图像和跨度：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<ul>
  <li class="nav-item active">
    <a class="nav-link" href="#">
      <img src="https://via.placeholder.com/25" alt="Shopping Cart" style="width: 25px;">
      <span class="align-bottom">Cart</span>
    </a>
  </li>
</ul>