没有表的特定文本间距

时间:2013-02-27 19:27:04

标签: html5 css3 text-formatting word-spacing

我正在尝试找到一种方法来排列div右侧的特定文本,而文本的其余部分则保留在左侧。This image should describe my problem better.

我希望它的格式更好,以便价格在右边排列,而不是在其他文本上拼凑起来。

有没有办法在没有桌子的情况下这样做?我有3个div包含相似的信息,这些信息都是彼此相邻的浮动。我查找了文本间距,行间距和文本格式,但无法找到专门针对此问题的内容。

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

样式化的无序列表和标签是很好的伴侣。如果需要,您可以调整列表项目的边距以控制间距。

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