CODEWITHSUNDEEP
htmlcss
Birdman
Birdman

Reputation: 5434

Align list item to the left in unordered list

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;   
}

Which results in the following unordered list:

How do I align the list-items to the left in the unordered list?

I've tried float and margin in the "#wrapper ul li", but that doesn't solve the problem..

Upvotes: 12

Views: 57555

Answers (3)

onof
onof

Reputation: 17377

Your unordered list markers need to be put outside:

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

Upvotes: 2

Rohan Prabhu
Rohan Prabhu

Reputation: 7302

Add a padding-left: 0pt to the #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;
}

Upvotes: 26

Tomasz Machura
Tomasz Machura

Reputation: 64

Try to decrease padding-left of your UL element. If it won't help, play with padding-left and margin-left of UL and LI.

Upvotes: 0

Related Questions