Выравнивание текста внутри индикаторов

Question

Выравнивание текста внутри индикаторов

0

Я пытаюсь выровнять текст влево и вправо в некоторых индикаторах выполнения, с процентами, выполненными в письменной форме с правой стороны, и заголовком объекта слева. Я уверен, что это простое исправление, но я не могу передать текст вправо, оставив некоторые слева, все на одной строке.

Я попытался выровнять отдельные промежутки следующим образом:

<div class="progress" style="width:40%">
    <span class="subject">Subject One</span><span class="percent">40/100</span>
</div>

/* styles */
.subject { text-align: left; }
.percent { text-align: right; }

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

Здесь скрипка: http://jsfiddle.net/U45XR/2/

Любая помощь очень ценится! Спасибо.

Для уточнения, я хотел бы, чтобы текст был выровнен полностью справа от элемента списка, а не только в завершении div

Chris 16 дек. 2013, в 21:49

Источник

Теги:

html

css

2 ответа

0

Используйте float:right на втором пролете и удалите выравнивание.

http://jsfiddle.net/U45XR/4/

РЕДАКТИРОВАТЬ: Для правильного выравнивания вы можете использовать позиционирование css. Проверьте этот JSfiddle: http://jsfiddle.net/U45XR/5/.

Antonis Grigoriadis 16 дек. 2013, в 19:06

1

Нет необходимости плавать .subject , установить поплавок только на .percent , он также выглядит лучше. jsfiddle.net/U45XR/4
Carlo Cannas 16 дек. 2013, в 20:36
0

действительно ты прав
Antonis Grigoriadis 16 дек. 2013, в 20:37
0

Спасибо, парни. К сожалению, я плохо объяснил это и на самом деле хотел, чтобы диапазон .percent был выровнен полностью справа от элемента списка, а не только div завершения. Таким образом, пролеты всегда оказываются разными, а не одинаковыми. Есть идеи?
Chris 16 дек. 2013, в 21:03
0

Проверьте это: jsfiddle.net/U45XR/5
Antonis Grigoriadis 16 дек. 2013, в 21:10
0

Да, я делал это изначально, но чувствовал, что это плохая практика - прибегать к абсолютному позиционированию в этой ситуации. Я ошибаюсь, чтобы думать это?
Chris 16 дек. 2013, в 21:32
2

Я не думаю, что это плохая идея использовать абсолютное позиционирование в этом случае.
Antonis Grigoriadis 16 дек. 2013, в 21:47

Показать ещё 4 комментария

Ещё вопросы

Нет необходимости плавать .subject , установить поплавок только на .percent , он также выглядит лучше. jsfiddle.net/U45XR/4
Спасибо, парни. К сожалению, я плохо объяснил это и на самом деле хотел, чтобы диапазон .percent был выровнен полностью справа от элемента списка, а не только div завершения. Таким образом, пролеты всегда оказываются разными, а не одинаковыми. Есть идеи?
Да, я делал это изначально, но чувствовал, что это плохая практика - прибегать к абсолютному позиционированию в этой ситуации. Я ошибаюсь, чтобы думать это?
Я не думаю, что это плохая идея использовать абсолютное позиционирование в этом случае.

Carlo Cannas · Accepted Answer · 2013-12-16T22-02-00.000Z

Если вы хотите выровнять его полностью, вы можете использовать абсолютное позиционирование. Укажите relative позиционирование для элементов li и absolute положение для .percent, не забудьте поместить его вправо, поэтому вставьте также right: 0. Добавьте правый край, если он слишком близко к концу панели.

Пример: http://jsfiddle.net/U45XR/7/