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

debugcn 发表于 Dev

机器人

在我的 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 图像和文本“知道了”。但我得到的是，虽然 sbg 显示在预期位置，但文本显示在图像下方，如下图所示。

如何正确定位图像右侧的文本，稍微分开一点？

PS：我试过使用 float: left，但它同时删除了文本。

暗里·阿提亚

您可以使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。