How to move the num to the position right of the image-CodePudding

Tried float:right but the image will only show half...
What I want is to move 123 move to the red circle

#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>

CodePudding user response：

The issue is the width you defined, which is too small to contain all the elements side by side: remove it or change it to fit-content so it will adapt to the content

#ImgControl{
    width: fit-content;
    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>

CodePudding user response：

try like below,

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

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