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;   
}