HTML + CSS: Numbered list with numbers inside of circles

Question

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

I can\'t for the

Answer 1

EDIT: I changed up the code so try and match what you have

I tried to do this with a carousel that I was making with an image and link inside of each list item like this:

   <ol id = "list">
     <li class = "listItems">
       <!-- Image -->
       <img src = "YourImage" class = "listNumber"></div>
       <!-- Text -->
       <div class = "listInfo">Info goes here</div>
     </li> 
   </ol>

and so on for each item. To get them to appear horizontally my css looked like this:

#list
{
    list-style: none;
    width: 5000px;  /* Total width of list IMPORTANT*/
}
    /* Image gallery list item*/
    #list li
    {
        float :left;    /* Arranges the items in a horizontal list IMPORTANT */
    }

That made all images line up horizontally. To edit each item inside the list you will need to place them in divs and then edit the css from there. Once you have them all floating the same way the css inside the divs shouldn't give you problem. You can just style them by class like this:

.listNumber
{
  postion: absolute;
  left: (#)px;
  top: (#)px;
}

I also remember that i needed to makes sure the list was at least the width of each item in it before I could float them all left. If it wasn't, then they would sit on the bottom.

Answer 2

I would use flexbox and add 'divs' to the 'li' containing the number.

    <div class="container">
<ul class="info-list">
  <li><div>1.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>2.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>3.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
</ul>
<ul class="info-list">
  <li><div>4.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>5.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>6.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
</ul>
</div>

CSS:

.container {
  display: flex;
}
.info-list li {
  list-style: none;
  display: flex;
}
.info-list li > div {
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-right: 10px;
}

On codepen: https://codepen.io/mkempinsky/pen/OBNXGO

Answer 3

I think I found out a solution for that. Your HTML code would be

<ol>
   <li>First item</li>
   <li>Second item</li>
</ol>

If you apply the following styles, it gets quite like a circle:

ol {margin-left:0; padding-left:0; counter-reset:item}
ol>li {margin-left:0; padding-left:0; counter-increment:item; list-style:none inside;margin-bottom:10px}
ol>li:before {
content:"(" counter(item) ")";
padding:3px 5px;
margin-right:0.5em;
background:#ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; 
}

I would then play around with paddings and radius in order to make it appear as a circle

Answer 4

I managed to get a perfect round bullet with a number inside the bullet with just css. Play around with the padding and radius to match your font style.

<span style="padding: 0 5px;text-align:center;border-radius: 15px;background-color:#000;color:#fff;">
  1
</span>

Answer 5

content:counter(li) with increment doesn't work in my less so I found some wokraround:)

li {
position: relative;
line-height: 2.5em;
list-style-type: none;
&:before{
  content: '';
  position: absolute;
  left: -29px;
  top: 7px;
  display: block;
  background: @btn-bg-secondary;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: @bg-color-primary;
  padding-left: 7px;
  line-height: 1.5em;
}
&:nth-child(1):before{
  content: '1';
}
&:nth-child(2):before{
  content: '2';
}
&:nth-child(3):before{
  content: '3';
}
&:nth-child(4):before{
  content: '4';
}
&:nth-child(5):before{
  content: '5';
}
&:nth-child(6):before{
  content: '6';
}
&:nth-child(7):before{
  content: '7';
}
&:nth-child(8):before{
  content: '8';
}
}

http://jsfiddle.net/du6ezxj7/

Answer 6

If anyone is still reading this, I encountered the same issue and found a tutorial that was extremely helpful.

Styling ordered list numbers

ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
    border-top:2px solid #666;
    background:#f6f6f6;
}
ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    border-top:2px solid #666;
    color:#fff;
    background:#666;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}