如何使元素表现得像表格对齐

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