Question

我有3个元素在跨度（idk，如果跨度比div更好），我希望在同一行上显示均匀间隔。

提前致谢!!

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我宁愿使用无序列表，使用text-align center，display：inline-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>

Answer 2

将display: flex;和justify-content: space-between;添加到.icons课程。在.icons span中，删除左/右边距值。

.icons {
  display: flex;
  justify-content: space-between;
}

.icons span{
    margin: 20px 0px; 
    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>
</div>

Answer 3

您可以使用flexbox

    .icons {
        display: flex;
    }
    .icons span{
       justify-content: center;
        margin: auto; 
        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>
    </div>

Answer 4

没有flex，最简单的脏方法是简单地使用内联块的宽度百分比：

.icons {
  text-align:center;
}

.icons span{
  display:inline-block;
  width:32%;
}

问：如何均匀地放置元素？

4 个答案: