Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML + CSS: Numbered list with numbers inside of circles

I'm trying to create an ordered list in CSS + HTML that looks like this: CSS List Example

I can't for the life of me figure out how to do this. I've tried using list-image but then the numerals don't appear. I tried setting a background, but it won't appear behind the number if list-style-position is set to outside. I tried setting it with a background and list-style-position: inside, then putting the text inside the li in a div to align it, but no combination of floats, margins, etc worked without wrapping around the numeral.

This seems like something I've seen on plenty of web sites, but at the moment I can't seem to find a working example, nor is Googling for this giving me any results.

So, can anyone help me with this? How would you create the above using HTML+CSS, ideally without using JS, and definitely without using just images. This text needs to be selectable and copy/pasteable.

Because a commenter asked, here's the markup I have right now:

<ol>   <li><span>List item one.</span></li>   <li><span>List item two.</span></li>   <li><span>List item three.</span></li> </ol> 

None of the CSS I've tried has even come close to working, so I'm not sure the value of sharing what I have currently. Here's one version that failed...

ol { display: block; list-style: decimal outside url('/images/lists/yellow-circle-18px.png'); } ol li { width: 176px; margin-right: 20px; float: left; } ol li span { display: block; } 
like image 230
Andrew Avatar asked Apr 20 '11 15:04

Andrew


People also ask

How do you put a number in a circle in HTML?

To create a circle, make sure width equals height. To adapt to font-size of number in the circle, use em rather than px. To center the number in the circle, use flex with justify-content: center; align-items: center; if the number grows (>1000 for example), increase the width and height at same time.

How can you make a list of items display with numbers?

To create ordered list in HTML, use the <ol> tag. Ordered list starts with the <ol> tag. The list item starts with the <li> tag and will be marked as numbers, lowercase letters uppercase letters, roman letters, etc. The default numbers for list items.


1 Answers

I'm using ideas that @Spudley has in his answer, and I'm using ideas from a previous answer I wrote:

  • How to use CSS to surround a number with a circle?

See: http://jsfiddle.net/j2gK8/

IE8 does not support border-radius, and workarounds like CSS3 PIE do not work with :before. And, older browsers like IE7 do not support counter.

If you want to make it work in older browsers, you'll have to resort to writing the numbers yourself. I also exchanged the fancy rounded corners for a normal image (which could have rounded corners, but doesn't in my example):

See: http://jsfiddle.net/XuHNF/

So, there's the fancy approach that won't work in IE7+IE8, which probably rules it out. And then there's the ugly, but compatible method.

Of course, there's always another problem. If you have differing amounts of text, then this happens.

You're then looking at this problem:

  • CSS Floating Divs At Variable Heights
  • https://stackoverflow.com/search?q=user%3A405015+masonry
like image 146
thirtydot Avatar answered Sep 20 '22 11:09

thirtydot