CSS, чтобы получить идеальный круг вокруг числа, используя радиус границы

Question

Спасибо за любую помощь по этому вопросу.

Я пытаюсь добиться этого: http://puu.sh/iQNoG/4ea224e4ad.png

и вот my code:

<div class="credit-callout"> 
<ul> 
    <li>C M E</li> 
    <li class="credit-number">19.5</li> 
    <li>CREDITS</li> 
</ul> 

Я подозреваю, что мой вопрос может быть, что я использую строки-элементы, но я не был» t получить их на 1 линии, не пройдя по этому маршруту.

Любая помощь приветствуется.

Спасибо!

Тони

Answer 1

Поскольку число широка вам потребуется Обивка Вверх & дно, чтобы быть больше, чем слева & справа, чтобы получить идеальный круг

Demo

http://jsfiddle.net/qtLx6cct/

Css

.credit-number { 
padding-top:18px; 
padding-bottom:18px; 
padding-left:5px; 
padding-right:5px; 
} 

Answer 2

проверить эту скрипку

http://jsfiddle.net/27a7ucd9/1

.credit-callout li.credit-number { padding: 21px 15px;} 

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