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. I can't seem to figure a way out.
Here's the html:
<span>8</span>
<span>9</span>
<span>10</span>
The 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 :(
Example: 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.