How to Get the Text to Start at the Left Margin in Nested Ordered Lists in HTML
- 1). Create your sample web page. Open a new file in your favorite text editor. Save it with the name "list-example.html" and put it on your desktop. Type the following HTML into your file and save it again:
<html>
<body>
<ol>
<li>thing 1</li>
<ol>
<li>thing 1:1</li>
<li>thing 1:2</li>
</ol>
<li>thing 2</li>
</ol>
</body>
</html> - 2). Find "list-example.html" on your desktop and double-click on the icon. The file will open in your favorite web browser. You will see one ordered list--"thing 1" and "thing 2"--with another ordered list--"thing 1:1" and "thing 1:2"--nested inside of it. You will see that the left margin of the nested list is indented.
- 3). Go back to your HTML file and add the CSS "padding-left" attribute to your nested list. In the nested ordered list (<ol>) element, add this "style" attribute:
style="padding-left: 0px"
Your ordered lists will look like this after the change:
<ol>
<li>thing 1</li>
<ol style="padding-left: 0px">
<li>thing 1:1</li>
<li>thing 1:2</li>
</ol>
<li>thing 2</li>
</ol>
The nested list has a box of padding around it by default. The CSS code "padding-left: 0px" sets the left side of that box to zero pixels in width.
Save the file. - 4). Refresh the page in your browser. You will see that the nested list and its parent list are now aligned along the left margin.
