如何将图像和span标记放在同一个div中，以在同一行显示其内容

Question

我有以下代码

  <div class="expense"><img class="money"/><span class="total"></span></div>

这将生成div并将图像放在一行上，将span内容放在另一行上。我怎么能把它们放在同一条线上？

Answer 1

css：display: inline-block或display: inline

Answer 2

你也可以这样做：

<div class="expense" style="display:table-row">
    <img class="money" style="display:table-cell" />
    <span class="total" style="display:table-cell"></span>
</div>

这不是最好的，但它是另一种选择

Answer 3

您可以使用flex：

.expense {
  display: flex;
  align-items: center;
}

Answer 4

您可以使用vertical-align：super进行跨度。