Inline-Block not moving images to horizontal row-CodePudding

Alright so I am trying to get these images to be in a row side by side. I am following a tutorial for a class assignment and as far as I know the code is perfectly fine. The images are the child of Choices, within the Choice class but for some reason I cannot get the images side by side instead of vertical.

Here is the CSS I am using

 .choices {
  margin-top: 50px 0;
  text-align: center;
  display: flex;
}

.choice {
  display: inline-block;
  border: 4px solid white;
  border-radius: 50%;
  margin: 0 20px;
  padding: 10px;
  transition: all 0.3s ease;
}


.choice:hover{
  cursor: pointer;
  background: #24273E;
}

and here is the HTML I am using

<div >
  <div  id="r">
<img src="imgs/rock.png" alt="">
</div>


<div >
  <div  id="p">
<img src="imgs/paper.png" alt="">
</div>


<div >
  <div  id="s">
<img src="imgs/scissors.png" alt="">
</div>
</div>

I have tried other people's suggestions online but none of them seem to fix the issue.

CodePudding user response：

The easiest way would be to add a class of display: flex to the class choices

.choices {
  display: flex;
}

img {
  width: 100px;
}

<div >
  <div  id="r">
    <img src="https://img.icons8.com/emoji/256/rock-emoji.png" alt="">
  </div>
  
  <div  id="r">
    <img src="https://image.shutterstock.com/image-vector/creative-paper-logo-design-260nw-1147233182.jpg" alt="">
  </div>
  
  <div  id="r">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Scissors_icon_black.svg/1024px-Scissors_icon_black.svg.png" alt="">
  </div>
</div>

CodePudding user response：

place the inline block on .choices and make each .choices wrap each .choice

.choices {
  display: inline-block;
  
  
  
  transition: all 0.3s ease;
  width:30vw;
}

<div >
  <div  id="r">
<img src="https://via.placeholder.com/25" alt="">
</div>
</div>

<div >
  <div  id="p">
<img src="https://via.placeholder.com/25" alt="">
</div>
</div>


<div >
  <div  id="s">
<img src="https://via.placeholder.com/25" alt="">
</div>
</div>