Issue
I'm trying to add 3 spans in the same line but they keep taking up all the width of the page each and ending up in different lines.
This is the code and below is the style:
.image-container {
position: relative;
width: 600px;
height: 300px;
text-align: center;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
.info-container {
position: relative;
width: 200px;
height: 280px;
text-align: center;
}
<div class="image-container">
<span class=info-container>
<div class="dot"></div>
<div class="dot-text">Test</div>
</span>
<span class=info-container>
<div class="dot"></div>
<div class="dot-text">Test</div>
</span>
<span class=info-container>
<div class="dot"></div>
<div class="dot-text">Test</div>
</span>
</div>
I've tried with the image-container
as both <div>
and <span>
but neither works. Dot and dot-text have 100px
of both height and width
Solution
You need to use display: inline-block
Read more here about the display property
.image-container {
position: relative;
width: 600px;
height: 300px;
text-align: center;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
.info-container {
position: relative;
width: 100px;
height: 280px;
text-align: center;
display: inline-block; // <-- This
}
<div class="image-container">
<span class=info-container>
<div class="dot"></div>
<div class="dot-text">Test</div>
</span>
<span class=info-container>
<div class="dot"></div>
<div class="dot-text">Test</div>
</span>
<span class=info-container>
<div class="dot"></div>
<div class="dot-text">Test</div>
</span>
</div>
Answered By - StudioTime
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.