Align list item to left in unordered list

Question

I have the following html and css:

HTML:

<div id="wrapper"> <ul> <li>li1</li> <li>li2</li> </ul> </div> 

CSS

 #wrapper { } #wrapper ul { width:50px; height:100px; border-style:solid; border-width:1px; list-style-type:none; } #wrapper ul li { border-style:solid; border-width:1px; } 

This results in the following unordered list:

How to arrange list items on the left in an unordered list?

I tried float and margin in "#wrapper ul li", but this does not solve the problem.

Answer 1

Add padding-left: 0pt block to #wrapper ul block:

 #wrapper ul { width:50px; height:100px; border-style:solid; border-width:1px; list-style-type:none; ' CHECK THE NEXT LINE ' padding-left: 0pt; } 

Answer 2

Try reducing the space to the left of your UL element. If this does not help, play with padding-left and margin-left from UL and LI.

Answer 3

Your unordered list markers must be marked outside :

 #wrapper ul { list-style-type: none; list-style-position: outside; }