How to align my ordered list items with a <p> element

Asked 30/6, 2013 at 14:48 Answered 11/5, 2017 at 7:14

I find the items of ol have left margin, but <p>This is first row</p> haven't left margin, so these three rows cannot left align. How can I make them left-aligned?

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type="text/css">
       li.A {
          list-style-type: decimal;
          font-weight: bold;
           margin-bottom:15px;          
        }

        li.B{
          list-style-type:upper-alpha;
          font-weight:normal;
          margin-top:4px;
          margin-bottom:4px;   

        }

        ol.C {

        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>This is first row</p>
        <ol>
            <li class="A">DIY SMS Export V1.05 has been released
                <ol class="C">
                    <li class="B">Add the function to delete sms selected</li>
                </ol>
            </li>

            <li class="A">DIY SMS Export V1.04 has been released
                <ol class="C">
                    <li class="B">Add chinese language support</li>
                </ol>
            </li>
        </ol>  
    </div>
    </form>
</body>
</html>

Picardi answered 30/6, 2013 at 14:48 Comment(0)

Have you tried adding the css:

ol{ padding-left:0; list-style-position:inside; }

working jsFiddle

Buttermilk answered 30/6, 2013 at 14:51 Comment(0)

Have a look at this JS Fiddle: http://jsfiddle.net/BPFQm/1/

You have two options, I think: Use list-style-position: inside and set padding-left: 0 (the "inside" class in the example). (Usage of list-style-position is explained on MDN here). Or you can manipulate padding-left until it lines up with your paragraph text.

Some other answers suggest adding margin-left: 0 but I'm not sure that's necessary. It certainly wasn't necessary in my Fiddle.

UPDATE: Look at the JS Fiddle I made again and you'll see an important difference between the two methods, which shows up when/if your list item spans multiple lines. If you use list-style-position: inside then subsequent lines will be flush with the number/label; whereas changing the left padding maintains the standard format in which the text has its own margin just to the right of the number/label. Choose whichever format you prefer for your purposes, I suppose.

Bashkir answered 30/6, 2013 at 15:3 Comment(0)

To get everything all the way over to the left, try this:

ol, ol li { margin-left:0; padding-left:0; list-style-position:inside; }

Reginiaregiomontanus answered 30/6, 2013 at 14:55 Comment(0)

Bydefault all ol/ul tags have some padding from left. you can remove that padding then it will work.

ol, ul { 
  padding-left: 0; 
  list-style-position: inside; 
}

check snippet below

ol, ul { 
  padding-left: 0; 
  list-style-position: inside; 
}

<ol>
  <li>list-item</li>
  <li>list-item</li>
  <li>list-item</li>
  <li>list-item</li>
  <li>list-item</li>
</ol>

<ul>
  <li>list-item - 1</li>
  <li>list-item - 2</li>
  <li>list-item - 3</li>
  <li>list-item - 4</li>
  <li>list-item - 5</li>
</ul>

Passport answered 11/5, 2017 at 7:14 Comment(0)

Recommended topics

Hot tags