如何使元素表現得像表格對齊

Question

我需要對齊跨度。 問題出在移動設備上，它們分為兩列，每列各有兩個單元格。 最右邊一列中的最后一個在所有列的左邊。 第一行完美對齊。 我怎樣才能解決這個問題？

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

網站是quickdiagnostics.co.uk

Answer 1

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

display: table; =>對於父div。

display: table-cell; =>對於兒童div