Remove oval border-radius when 2 digit numbers show up


Tags: html,css,css3

Problem :

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/



Solution :

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

    CSS Howto..

    How to change margin according to other elements?

    How can i disable the bootstrap hover color for links

    How to position boxes like a posterboard with CSS?

    Using CSS, how to rotate a 3D box 180 degrees on mouse enter and continue to 360 on leave?

    How to reset css in middle of html document?

    Mini-map of HTML page sections shown as fixed anchors in viewport

    How to do page / content transitions

    How to fix an image compared with another one in CSS?

    CSS Position Help (horizontal sidebar showing up when animate content over)

    How to change a div top margin without leaving a white space?

    How to make the gradient border stay at the screen

    how to stretch an image in background css property

    How do I get the ID of a JQuery item mid-function?

    How can I make a visual header in CSS without PHP?

    How to achieve pages like a math notebook in css?

    CSS animations - How to toggle direction with one keyframes declaration

    How can I make an image continue across multiple sections with breaks in between?

    How to make gridview in asp.net scrollable?

    How to center FontAwesome icon in css before content vertically

    How to remove unwanted white space in CSS

    how to align css content string

    How can I find the css error when I run a jquery plugin on IE8?

    How to target itemid=“” in CSS

    How to test a web designer on css layouts?

    how to write a css that only can be visible on desktop in bootstrap

    How can razor be used to expand CSS templates?

    How do I output HTML form data to PDF?

    how to apply two classes of css on same element?

    How to use image tag in body of html instead of loading image from css?

    How to create an image sprite that stretches both horizontal and vertically as a single image?