Я пытаюсь установить идеальный круг и сделать это, когда мне нужно показывать цифры от 1 до 9, но он становится испорченным, когда отображаются две цифры. Кажется, я не вижу выхода.
Вот html:
8 9 10 CSS:
span{ float: left; font-size: 10px; position: relative; border: 1px solid #000; border-radius: 50%; padding:5px 10px; margin: 5px; }
Посмотрите, как граница границы вокруг 10 беспорядочна и становится овальной 🙁
Пример: http://jsfiddle.net/aKmF6/21/
Вы должны определить высоту и ширину, попробуйте следующее:
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; }
Вам нужно будет установить высоту и ширину:
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; }