Блог

Главная - Вопросы по программированию - CSS: как мне встроить 3 элемента? выравнивание по левому краю, выравнивание по правому краю, выравнивание по левому краю

CSS: как мне встроить 3 элемента? выравнивание по левому краю, выравнивание по правому краю, выравнивание по левому краю

#css

#css — код

Вопрос:

Я хочу отобразить таблицу с цифрами, выровненными шрифтом нефиксированной ширины:

 $2,280
$  300 (total discount)
$   10 (add-on fee)

И я бы хотел, чтобы все цифры в долларах были просто встроенными интервалами:

 <span class='dollar'>$</span><span class='amount'>2,280</span>
<span class='dollar'>$</span><span class='amount'>300</span> (total discount)
<span class='dollar'>$</span><span class='amount'>10</span> (add-on fee)

Но я не могу до конца разобраться с CSS, чтобы заставить это работать. Вы можете мне помочь?

Комментарии:

1. Почему бы не опубликовать CSS, который у вас уже есть?

2. Я уверен, что вы уже рассматривали это, но помещение этой информации в таблицу, а не в разделы, даст вам желаемую структуру.

Ответ №1:

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

 .amount {
    display: inline-block;
    width: 100px;
    text-align: right;
}

http://jsfiddle.net/A72hM/

Ответ №2:

Если вы знаете максимальное количество цифр в .amount, то вы можете установить для его отображения значение inline-block, а затем установить его ширину.

Если вы не знаете, что это максимальная ширина, то вам, вероятно, следует вместо этого использовать реальную таблицу.

Пример обоих методов: http://jsfiddle.net/ZbB8K /

Ответ №3:

Я полагаю, вам нужно будет присвоить span.amount фиксированную ширину.

 span.amount {
  width: 100px;
}
Метки: