конкретный текстовый интервал без таблиц

Question

Я пытаюсь найти способ выстроить текст в правой части div, в то время как остальная часть текста останется слева.

Я бы хотел, чтобы он был лучше отформатирован так, чтобы цены выстроились справа, а не сгруппированы по другому тексту.

Есть ли способ сделать это без таблиц? У меня есть 3 divs, содержащих аналогичную информацию, которые все плавают слева друг от друга. Я искал текстовое расстояние, межстрочный интервал и форматирование текста и не мог найти ничего специально для этой проблемы.

Спасибо за вашу помощь

Answer 1

Styled маркированные списки и этикетки делают хорошие компаньоны. Вы можете отрегулировать поля в элементах списка, чтобы управлять интервалом, если хотите.

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