html - 无法使用 css/html 并排放置图像和文本

Question

在我的 html 文件中，我有以下内容:

<div>
     <!--some divs here-->

     <div>
          <svg class="tick-icon" xmlns="http://www.w3.org/2000/svg" 
                   viewBox="0 0 16 16">
            <!--svg image details-->
          </svg>
          <p class="got-it">Got it</p>

          <!--Some more elements-->
     </div>       
</div>      

'tick-icon' 和 'got-it' 的 CSS 如下:

.tick-icon {
  margin-top: 47px;
  margin-left: 12px;
  margin-bottom: 20px;
  margin-right: 2px;
  width: 24px;
  height: 24px;
 }

.got-it {
  margin-top: 43px;
  margin-left: 2px;
  margin-bottom: 26px;
  margin-right: 124px;
  font-size: 12px;
  color: #6f737a;
  width: 35px;
  height: 14px;
}

对于最外层的 div，我将样式设置为 position:relative。

我的目标是在矩形框底部边缘附近的某处并排显示 svg iamge 和文本“知道了”。但我得到的是，虽然 sbg 显示在预期位置，但文本显示在图像下方，如下图所示。

如何将文本正确地放置在图片右侧并稍微分开一点？

PS:我试过使用 float: left，但它会一起删除文本。

Answer 1

您可以使用flexbox 并将其方向更改为row。这样你就可以水平放置元素。如果你想在它们之间留一个空格，只需在文本元素上使用 margin-left 即可。

.tick-icon {
  margin-top: 47px;
  margin-left: 12px;
  margin-bottom: 20px;
  margin-right: 2px;
  width: 24px;
  height: 24px;
}

.got-it {
  margin-top: 43px;
  margin-left: 2px;
  margin-bottom: 26px;
  margin-right: 124px;
  font-size: 12px;
  color: #6f737a;
  width: 35px;
  height: 14px;
}

.horizontal-div {
  display: flex;
  flex-direction: row;
}

<div>
  <!--some divs here-->

  <div class="horizontal-div">
    <svg class="tick-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
            <!--svg image details-->
          </svg>
    <p class="got-it">Got it</p>

    <!--Some more elements-->
  </div>
</div>