水平向右对齐行内容 html

Question

我有一个文本和一个小图像，我想将其水平对齐到右侧：

    <div class="row float-right">
      <div class="title" >Stream Chat</div>
      <img src="~assets/chat.svg" />
    </div>
    <!-- rest of the code -->
    <div class"row">
    ...

我希望两者在同一条线上并排在一起，而不是在彼此的下方。我可以使用 float-right 并将它们移到右侧，但问题是首先 img 位于文本下方，然后该行移动到下一行的右侧，并且它们保持在同一行！我怎样才能使文本和图像保持水平并位于行的右侧？

Answer 1

使用弹性盒子！！这绝对是最简单的方法

#container{
display:flex;
justify-content:flex-end;
align-items:center;
border:solid 1px blue;
}

<div id="container">
  <div id='txt'>Stream Chat</div>
  <img src="https://via.placeholder.com/100" />
</div>

水平向右对齐行内容 html

aligning row content to the right horizontally html

html

css

grid

row

image