HTML + CSS: Numbered list with numbers inside of circles

前端未结

关注

 9  2171

清酒与你 2020-11-30 23:25

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

I can\'t for the

9条回答

北荒 (楼主)

2020-11-30 23:54
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:
```
   
     
       
       
```
Info goes here

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.

0 讨论(0)

查看其它9个回答