CODEWITHSUNDEEP
htmlcsshtml-lists
qwertymk
qwertymk

Reputation: 35256

Whats the best way to shift list items visually?

I have a <ul> that has a bunch of <li>s.

Some of the <li>s need to have certain formatting for example

a
b
    c
    d
e

I can't have an <li> contain a <ul> so for now I'm wrapping the c and d in a <div> with the left-margin set. Is this safe to do, is there a better way to do this?

Upvotes: 0

Views: 4511

Answers (3)

Kangkan
Kangkan

Reputation: 15571

That will work.

The other option may be using CSS to handle it like this:

        .myUl{
            margin:0px;
            list-style-type: none;
        }
        .myUl .marginless {
            margin: 0px;
        }
        .myUl .margin {
            margin: 0px;
            margin-left: 20px;
        }


    <ul class="myUl">
        <li class="marginless">a</li>
        <li class="marginless">b</li>
        <li class="margin">c</li>
        <li class="margin">d</li>
        <li class="marginless">e</li>
    </ul>

Upvotes: 0

sandeep
sandeep

Reputation: 92803

Write like this:

CSS:

ul{
     list-tyle:none;
}
li{
    margin:5px 0;
}
.shift{
    margin-left:20px;
}

HTML:

<ul>
    <li>a</li>
    <li>b</li>
    <li class="shift">c</li>
    <li class="shift">d</li>
    <li>e</li>
</ul>

Check this live http://jsfiddle.net/KuNWf/

Upvotes: 3

Blender
Blender

Reputation: 298106

No, this isn't a good idea.

ul elements contain only li elements. Nothing more. If the browser renders it fine today, don't expect it to function tomorrow, as you are working with non-standard behavior.

The standard is defined here.

Is there any reason for why you cannot nest ul tags?

Upvotes: 0

Related Questions