DIVまたはSPANの内容を固定幅にし、残りのスペースに空白を入れる方法はありますか？

Question

私は現在以下のようなものを持っています。実行時に以下のようになります

<div width="100%"> 
    <span width="33%">FIRSTNAME</span> 
    <span width="33%">|LASTNAME</span> 
    <span width="33%">|CITY</span> 
</div> 

：（スパン要素はそれぞれの33％ですページ幅の100％を占有：

 
FIRSTNAME|LASTNAME|CITY 

は、しかし、私は実際に必要とすることは、以下のようなものですメインDIV要素）

 
FIRSTNAME      |LASTNAME      |CITY 

これを達成する方法をお勧めしますか？あなたはフレキシボックスでそれを行うことができます

Answer 1

：

div { 
 
    display: flex; /* displays span's inline */ 
 
    justify-content: space-between; /* evenly distributed */ 
 
} 
 

 
span { 
 
    flex: 1; /* each 33.33% of the div's width */ 
 
}

<div> 
 
    <span>FIRSTNAME</span> 
 
    <span>|LASTNAME</span> 
 
    <span>|CITY</span> 
 
</div>

Answer 2

あなたはCSS

<div class="container"> 
    <span>FIRSTNAME</span> 
    <span>|LASTNAME</span> 
    <span>|CITY</span> 
</div> 

body { 
    width: 100%; 
} 
.container { 
    width: 100%; 
} 
.container span { 
    width: 33%; 
    display: inline-block 
} 

それとも、これであなたを助けるために、ブートストラップを使用することができて、これを行うことができます

https://getbootstrap.com/