[英]Remove oval border-radius when 2 digit numbers show up
I'm trying to set a perfect circle and manage to do that when I have to show the numbers from 1 to 9 but it gets messed up when two digits are shown. 当我必须显示一个从1到9的数字时,我试图设置一个完美的圆并设法做到这一点,但是当显示两个数字时,它就会变得混乱。 I can't seem to figure a way out.
我似乎找不到办法。
Here's the html: 这是html:
<span>8</span>
<span>9</span>
<span>10</span>
The CSS: CSS:
span{
float: left;
font-size: 10px;
position: relative;
border: 1px solid #000;
border-radius: 50%;
padding:5px 10px;
margin: 5px;
}
See how the border radius around 10 messes up and becomes an oval :( 看看10附近的边界半径如何弄乱并变成椭圆形:(
Example: http://jsfiddle.net/aKmF6/21/ 示例: http : //jsfiddle.net/aKmF6/21/
You need to define height and width, try this: 您需要定义高度和宽度,请尝试以下操作:
span {
font-size: 10px;
position: relative;
border: 1px solid #000;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
}
You will have to set the height and width: 您将必须设置高度和宽度:
span{
float: left;
font-size: 10px;
position: relative;
border: 1px solid #000;
border-radius: 50%;
margin: 10px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.