html - Q : How do I space elements evenly?

Question

我在 span 中有 3 个元素(idk，如果 span 比 div 好)，我想在同一行上均匀间隔显示。

提前致谢!

.icons span{
   justify-content: center;
    margin: 20px 50px; 
    float: left;
    border-color: black;
    border-width: 2px;
    
}

 <div class="icons">
            <span>
                <h1>Honest</h1>
            </span>
            <span>
                <h1>Accurate</h1>
            </span>
            <span>
                <h1>Reasonable</h1>
            </span>

Answer 1

我宁愿使用无序列表来做到这一点，使用文本对齐居中，显示:内联 block 并在列表上使用填充以在两者之间留出均匀的空间。

.row{
text-align: center;
}
ul{
text-align: center;
margin: 0 auto;
}
li{
text-align: center;
display: inline-block;
padding: 0px 10px;
}

<div class="row icons">
    <ul>
        <li><h1>text1</h1></li>
        <li><h1>text2</h1></li>
        <li><h1>text3</h1></li>
    </ul>
</div>