Spans not stacking in the same line-CodePudding

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 >
    <span class=info-container>
        <div ></div>
        <div >Test</div>
    </span>
    <span class=info-container>
        <div ></div>
        <div >Test</div>
    </span>
    <span class=info-container>
        <div ></div>
        <div >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

CodePudding user response：

You need to use display: inline-block

.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 >
    <span class=info-container>
        <div ></div>
        <div >Test</div>
    </span>
    <span class=info-container>
        <div ></div>
        <div >Test</div>
    </span>
    <span class=info-container>
        <div ></div>
        <div >Test</div>
    </span> 
</div>

CodePudding user response：

Because you use divs inside the span they will still be shown as display: block so the span will still be full width. So changing the inner divs to span will fix that. Or you can use display: inline-block on the outer one.

.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;
    display: inline-block; // this can work
    }

<div >
    <span class=info-container>
        <!-- using spans here will also work -->
        <span ></span>
        <span >Test</span>
    </span>
    <span class=info-container>
        <div ></div>
        <div >Test</div>
    </span>
    <span class=info-container>
        <div ></div>
        <div >Test</div>
    </span> 
  </div>