問：我如何均勻分配元素？

Question

我有3個元素跨度（idk，如果跨度比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

我使用無序列表，而做到這一點，使用文本對齊中心顯示：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

您可以使用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 3

添加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 4

沒有彎曲，最簡單的骯髒的方式是通過簡單地使用在直列塊寬度的百分比：

.icons { 
    text-align:center; 
} 

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