Q：要素を均等に配置するにはどうすればよいですか？

Question

私は、同じ行に均等に配置したいと思っているスパン（これに対してdivがspanよりも優れている場合はidk）を持っています。

ありがとうございます！

.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

私はむしろ、順不同リストを使用してそれを行うテキストアラインセンターを使用して、表示したい：インラインブロックとの間にも、スペースを作るために、リスト上のパディングを使用します。

.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

あなたの.iconsクラスにdisplay: flex;とjustify-content: space-between;を追加

.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

フレキシボックスを使用することができます。 .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%; 
}