Как растянуть цифры по ширине div?

казалось бы, простая задача, но меня загнала в ступор.
есть три инлайн-блока с цифрами (таймер), блоки имеют фиксированную ширину, скажем 30px. я пытаюсь растянуть цифры по ширине блока, но безуспешно.
<div class="hours">12</div>
<div class="minutes">56</div>
<div class="seconds">01</div>


нагуглил один вариант, но он растягвает только после пробела, если пробела нет, то ничего не тянется.
пример с текстом
в моем случае нет возможности поставить этот пробел между цифрами или разделить, например, часы по отдельным двум блокам. или можно как-то с помощью js/jquery?
подскажите, как пропорционально растянуть цифры по блоку?
  • Вопрос задан
  • 395 просмотров
Решения вопроса 1
@v-orlov Автор вопроса
пока с letter-spacing у меня самый рабочий вариант, но не совсем подходит, тк шрифт таймера немного кривой, и цифра "1" имеет самую маленькую ширину, и из-за нее заметно съезжает вторая цифра.
то есть "18" и "08" имеют заметно разную ширину, и в первом случае восьмерка влево прыгает. если бы "8" была прижата к правому краю, это бы не так бросалось в глаза.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
dmitriy_novikov
@dmitriy_novikov
Занимаюсь web-разработкой с 2010г. http://dmnv.ru
используйте css-свойство letter-spacing - с помощью него можно задать расстоянием между символами не используя пробелы.
Ответ написан
Комментировать
Разбейте цифры по отдельным блокам (каждый в отдельный span), и выровняйте их по ширине с text-align: justify
Ответ написан
@Rithmsamba
Попробуйте взять первый символ через :first-letter и задайте ему float:left
ну и дальше подровнять паддингами или line-height
Естественно, text-align: right
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы