CODEWITHSUNDEEP
htmlcsshtml-lists
bragboy
bragboy

Reputation: 35542

How to make indentation in html ul li tag

I have unordered list which has bulleted text within. I need to indent the list items in line. However for long running text, the style is not working as expected. I should make it aligned within the border box. Here is the css code

ul{
    background-color: #FFFFFF;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    list-style: disc inside none;
    padding: 10px;
}

Here is the example HTML

<div style="padding:20px">
    <ul>
        <li>Should be minimum of 8 characters</li>
        <li>A long running text A long running text A long running text A long running text A long running text</li>
        <li>Should have at least one number</li>
    </ul>
</div>

enter image description here

JS Fiddle link : http://jsfiddle.net/jHJXq/

Upvotes: 13

Views: 56974

Answers (4)

Vitor Freitas
Vitor Freitas

Reputation: 3610

change the list-style from inside to outside

list-style: disc outside none;

Upvotes: 2

IMI
IMI

Reputation: 2469

Is this what you are looking for? http://jsfiddle.net/jHJXq/3/

ul{
    background-color: #FFFFFF;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    list-style: disc outside none;
    padding: 10px 10px 10px 25px;
}

I changed the list style to "outside" and gave some extra padding to the left.

enter image description here

Upvotes: 23

Stig Hausberg
Stig Hausberg

Reputation: 836

ul{
    background-color: #FFFFFF;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    list-style: disc;
    padding:10px;
}

li{
    margin-left:10px;
}

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Add style to the LI:

li {
   margin-left:15px;  
}

Upvotes: 7

Related Questions