如何在同一行上生成跨度和图像？

问题描述 投票：0回答：3

我有一个span元素，其中包含文本，后跟我想要在同一行上的图像，但是由于某种原因，不是。

我曾尝试使用display: inline-block和whitespace: nowrap，但似乎都没有用。

当前看起来像这样，我添加了红色边框，这样看起来很清晰。

enter image description here

我当前的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;
}
html css layout line-breaks
3个回答
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>
1
投票

例如，我会考虑使用引导程序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>

有关其他信息，建议您访问以下网站：w3schoolsBootstrap

0
投票

[如果您也想在它们之间保持空间。使用justify-content属性。

.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.