CODEWITHSUNDEEP
htmlcss
Ludvig Hoel Ludde
Ludvig Hoel Ludde

Reputation: 21

How to make elements behave like table aligned

I need to align the spans. Problem is on mobile devices, where they divide into two columns with two cells each. The last in the rightmost column is all to the left towards the other. The first row align perfectly. How can I fix this?

<div id="topbar" style="background-color:#355A73; color:white;">
    <div class="col-full">
        <span style="display:inline-block;"><div class="tooltip"><i class="far fa-clock" style="margin-right:5px;margin-left:5px;"></i>SOme text<span class="tooltiptext"><i class="fas fa-angle-double-right" style="color:white;margin-right:5px;"></i>Some text</span>
        <span style="display:inline-block;"><div class="tooltip"><i class="fas fa-lock" style="margin-right:5px;margin-left:5px;"></i> Some Text <span class="tooltiptext"><i class="fas fa-angle-double-right" style="color:white;margin-right:5px;"></i>Some Text</span></div></span>
        <span style="display:inline-block;"><div class="tooltip"><i class="fas fa-check-circle" style="margin-right:5px;margin-left:5px; "></i>Some Text <span class="tooltiptext"><i class="fas fa-angle-double-right" style="color:white;margin-right:5px;"></i>Some Text</span>
        <span style="display:inline-block;"><div class="tooltip"><i class="fas fa-money-bill" style="margin-right:5px;margin-left:5px;"></i>Some Text<span class="tooltiptext"><i class="fas fa-angle-double-right" style="color:white;margin-right:5px;"></i>Some Text</span></div></span>
    </div>
</div>

Site is quickdiagnostics.co.uk

Upvotes: 1

Views: 57

Answers (1)

Vetrivel Pandiyarajan
Vetrivel Pandiyarajan

Reputation: 646

<div style="display: table;">
    <div style="display: table-cell;">
    </div>
</div>

display: table; => For parent div.

display: table-cell; => For child div

Upvotes: 2

Related Questions