Выравнивание текста не работает с диапазоном

-3

Мне нужно выравнивание ниже. Я могу добиться этого с помощью таблицы, но мне нужно решение без использования таблицы.Выравнивание текста не работает с диапазоном

Sub Total $596.00 
    Shipping $35.00 
     Tax $63.11 
Order Total $694.11

Когда я не использую таблицу, она выглядит ниже, хотя я использую text-align: right для первого элемента span.

Sub Total $596.00 
Shipping  $35.00 
Tax   $63.11 
Order Total $694.11

источник

2014-12-02 zahiritpro

Почему бы не использовать таблицы? Это похоже на хороший кандидат на элемент '

'. – misterManSam

используйте 'text-align: right' для всех' td', ** или ** создайте для него правило css. – Bharadwaj

Я не могу добавить содержимое заголовка таблицы. Без которого инструмент доступности выводит сообщения об ошибках – zahiritpro

ответ

Вы можете использовать inline-block и first-child до align и добавить padding.

Что-то вроде этого:

#container > div > div { 
 
    display:inline-block; 
 
    min-width:75px; 
 
} 
 

 
#container > div > div:first-child { 
 
    text-align:right; 
 
    padding-right:10px; 
 
}

<div id="container"> 
 
    <div> 
 
     <div>Sub Total</div> 
 
     <div>$596.00</div> 
 
    </div> 
 
    <div> 
 
     <div>Shipping</div> 
 
     <div>$35.00</div> 
 
    </div> 
 
    <div> 
 
     <div>Tax</div> 
 
     <div>$63.11</div> 
 
    </div> 
 
    <div> 
 
     <div>Order Total</div> 
 
     <div>$694.11</div> 
 
    </div> 
 
</div>

источник

2014-12-02 14:33:44

текст-выровнять не работает с встроенными элементами. Попробуйте установить отображение: встроенный блок или дисплей: блок для элемента span.

источник

2014-12-02 13:13:50 Mela

Смежные вопросы