CSS使用border-radius获得数字的完美圆圈

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>

我怀疑我的问题可能是我正在使用订单项，但如果不走这条路线，我就无法将它们放在一条线上。

Answer 1

因为数字很宽，你需要填充顶部和顶部。底部大于左边＆amp;有权获得一个完美的圆圈

<强>演示

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;}

你的号码从左侧和右侧都比较大，这就是为什么你没有得到完美的圆圈......只是数字级别的用户填充。