HTML + CSS: Numbered list with numbers inside of circles
The horizontal layout aspect of the question can be achieved using CSS float
and/or display:inline-block;
. These are well documented for this, as list elements are often used for creating drop-down menus using this technique, so I won't discuss it further here.
The circled number aspect is a bit more tricky.
It can't be achieved using standard list styles, unless you're prepared to use graphics, and hard-code the image name each one. This is quite an old-school approach, and I suspect it's not what you're looking for.
One idea that popped into my head would be to use a font that has its numbers in circles, such as this one, and then simply style the <ol>
element to use that font, and the <li>
element to use your regular font. The down-side of this is that you'd have to keep your list below 10 items, and the user's browser would need to download a whole font just for that. Also, you would need to pick one that matched the other fonts on your site. Probably not an ideal solution, but it would work.
A more practical solution would be to abandon the list style entirely (still use the same HTML markup, but set list-style:none;
). The numbers would then be inserted using CSS's little-used :before
and count()
features.
In your case, it would be along the following lines:
ol ul:before {
content: counter(mylist);
}
This will give you the same numbered sequence. You would then need to add further styles to the selector above to give it a circle background, some colours, and a bit of margin. You would also need to style the <li>
element somehow so that its entire text was indented from the number rather than wrapping below the number. I expect this could be done with display:inline-block;
or similar.
It might need a bit of experimentation, and I haven't given the complete answer, but the technique would definitely work.
See quirksmode.org for a writeup and examples, along with a browser compatibility chart.
And the browser compatibility chart gives a clue as to the one major down-side of this technique: It won't work in IE7 or earlier. It does work in IE8 though, and in all other browsers, so if you can live with IE7 users not seeing it (and there aren't that many of them these days), then it should be fine.
CSS circles with a number
There are a lot of approaches to realize this. Here's one:
- create a list (
ul
orol
) and remove the list style (list-style: none;
) - initialize a counter:
counter-reset: section;
- increase counter on each list item and print it using a pseudo element (
:before
):content: counter(section); counter-increment: section;
- style the pseudo element (
:before
) like you want it
ul { counter-reset: section; list-style: none;}
li { margin: 0 0 10px 0; line-height: 40px;}
li:before { content: counter(section); counter-increment: section; display: inline-block; width: 40px; height: 40px; margin: 0 20px 0 0; border: 1px solid #ccc; border-radius: 100%; text-align: center;}
<ul> <li>First item</li> <li>Second item</li></ul>
HTML list with number/circles, text aligment inside circles
Easy you just need to add 2 lines to this class
.circle > li:before {
...
vertical-align: middle;
line-height: 3em;
}
How to use CSS to surround a number with a circle?
Here's a demo on JSFiddle and a snippet:
.numberCircle { border-radius: 50%; width: 36px; height: 36px; padding: 8px;
background: #fff; border: 2px solid #666; color: #666; text-align: center;
font: 32px Arial, sans-serif;}
<div class="numberCircle">30</div>
How to create a circle with a number in the center that scales to fit the circle in HTML/CSS?
I think this code solves your problem. Just make sure the font-size and the width of the parent is same, (5 rem in this example).
div{ font-size: 5rem; width: 5rem;
background-color: aquamarine; padding: 1rem; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%;}
<div>5</div>
Related Topics
Semantically, Which Is More Correct: a in H2, or H2 in A
Use Multiple @Font-Face Rules in CSS
Can You Have a <Span> Within a <Span>
Apache Giving 403 Forbidden Errors
404 Page Not Found - Go Rendering CSS File
How to Have a Video with Transparent Background Using HTML5 Video Tag
Allow Access-Control-Allow-Origin Header Using HTML5 Fetch API
Wrapping HTML Table Rows in <A> Tags
How to Prevent Background Scrolling When Bootstrap 3 Modal Open on Mobile Browsers
Twitter Bootstrap: Align Nav-Tabs to Bottom of Div
Convert Embedded Svg to Png In-Place
Fixed Header, Footer, and Sidebars with Scrolling Content Area in Center
CSS Padding Is Not Working in Outlook