如何将num移动到图像右侧的位置答案

【问题标题】：How to move the num to the position right of the image如何将num移动到图像右侧的位置
【发布时间】：2022-11-17 18:05:16
【问题描述】：

试过 float:right 但图像只会显示一半...
我想要的是移动123移动到红色圆圈

#ImgControl{
    width: 25px;
    height: 25px;
    background-color: #ffd7c2;
    position: absolute;
    bottom: 20px;
    right: 30px;
}

<div id="ImgControl">
  <img  src="assets\icon\cart.png" @click="Test"/>
  <span>123</span>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

问题是您定义的 width 太小，无法并排包含所有元素：删除它或将其更改为 fit-content 以便它适应内容

#ImgControl{
    width: fit-content;
    height: 25px;
    background-color: #ffd7c2;
    position: absolute;
    bottom: 20px;
    right: 30px;
}

<div id="ImgControl">
  <img  src="assetsiconcart.png" @click="Test"/>
  <span>123</span>
</div>

【讨论】：

【解决方案2】：

像下面这样尝试，

#ImgControl{
width: 25px;
height: 25px;
background-color: #ffd7c2;
position: absolute;
top: 20px;
right: 20px;}

<div id="ImgControl">
    <span>123</span>
    <img  src="assetsiconcart.png" @click="Test"/>
    
</div>

【讨论】：