如何使跨度和图像在同一行？

Question

我有一个 span 元素，其中有文本，后面是我想要的图像，但由于某些原因，它不是。

我尝试过使用 display: inline-block 和 whitespace: nowrap，但其中 none 似乎也有效。

目前是这样的，我加了红边，这样比较清楚。

我目前的HTML如下：

<div class="heading2" style="border: red solid 5px;">
    <div>
        <span style="border: red solid 5px;" id="headings2_span">Entrada</span>
    </div><div>
        <img src="../assets/thumbnails/responsive_menu_icon-512.png" alt="Menu" id="headings2_menu" style="border: red solid 5px;">
    </div>
</div>

对应的CSS如下：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.heading2{
    float: right;
}

#headings2_span{
    white-space: nowrap;
}

#headings2_menu{
    width: 7%;
    height: auto;
    float: right;
}

Answer 1

我会考虑使用 bootstrap 4，例如：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <span style="border: red solid 5px;" id="headings2_span">Entrada</span>
        <img src="../assets/thumbnails/responsive_menu_icon-512.png" alt="Menu" id="headings2_menu" style="border: red solid 5px;">
      </div>
    </div>
  </body>
</html>

有关其他信息，我建议您查阅以下网站： w3schools Bootstrap

Answer 2

只需使用 flex。

 .heading2{
        float: none;
        display: flex;
        align-items: center;
    }

<div class="heading2" style="border: red solid 5px;">
    <div>
        <span style="border: red solid 5px;" id="headings2_span">Entrada</span>
    </div><div>
    <img src="align-left.png" alt="Menu" id="headings2_menu" style="border: red solid 5px;">
</div>

Answer 3

此外，如果你想在它们之间保留 space。使用 justify-content 属性。我建议学习弹性。自从开始学习flex后，我几乎没有使用过float属性。

.heading2{
        float: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

<div class="heading2" style="border: red solid 5px;">
    <div>
        <span style="border: red solid 5px;" id="headings2_span">Entrada</span>
    </div><div>
    <img src="align-left.png" alt="Menu" id="headings2_menu" style="border: red solid 5px;">
</div>

如何使跨度和图像在同一行？

How to make span and image on the same line?

html

css

layout

line-breaks