html - 表のない特定のテキスト間隔

Question

特定のテキストを div の右側に並べ、残りのテキストを左側に配置する方法を見つけようとしています。

価格が右側に並び、他のテキストに集中しないように、より適切な形式にしたいと考えています。

テーブルなしでこれを行う方法はありますか? 同様の情報を含む 3 つの div があり、それらはすべて左右に並んでいます。テキストの間隔、行間、テキストの書式設定を探しましたが、この問題に特に関連するものは見つかりませんでした。

ご協力いただきありがとうございます

Answer 1

スタイル付きの順序付けされていないリストとラベルは、優れたコンパニオンになります。必要に応じて、リストアイテムの余白を調整して、間隔を制御することもできます。

<div class="prices">
    <h2>Rates</h2>
<ul>
    <li>
        <label>Day Pass:</label> $20
    </li>
    <li>
        <label>Month Pass:</label> $20
    </li>
    <li>
        <h3>Personal Training</h3>
    </li>
        <li>
        <label>Something:</label> $20
    </li>
    <li>
        <label>Something else:</label> $20
    </li>
</ul>
</div>

CSS：

.prices h2 {
    text-align:center 
}

.prices ul, .prices li {
   list-style:none;
   margin:0;
   padding:0    
}

.prices label {
   display:block;
   float:left;     
   margin-left:120px;
   margin-right:10px; 
}

.prices h3 {
    margin-left:100px;   
}