没有表的特定文本间距

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