HTML list formatting

Question

New to CSS. I tried to create a cascaded bullets. Turned out the style for li, ul were overwritten by some css file, I had to manually add style="list-style-type: disc;" to get back the bullet. However the following HTML code doesn't produce the nested bullets with identations.

    this is an example
    <ul>
        <li style="list-style-type: disc;"> this 1
            <ul>
                <li style="list-style-type: disc;"> this is 1.1</li>
                <li style="list-style-type: disc;"> this is 1.2</li>
            </ul>
        </li>

    </ul>

Here is what it looks on my browser

enter image description here

Any idea how to make the nested list with indentation by applying the right styles on the ul and li elements?

Thanks in advance.

it's ok for me jsbin.com/wodikate/1/edit... the problem is in some where else... would you add whole code? — Kiyarash
– Kiyarash, Commented Apr 2, 2014 at 2:31
works fine here. your other css code might overide it. — Baby
– Baby, Commented Apr 2, 2014 at 2:31

Meligy · Accepted Answer · 2014-04-02 02:39:27Z

2

Check this example, I have made it very close to your case:

http://jsfiddle.net/MUNP9/

The idea is that some CSS in the page is overriding default padding-left of the nested ul. You can override it again.

Like:

ul ul {
    padding-left: 40px;
}

Also, you don't need to apply inline styles, just use CSS classes.

answered Apr 2, 2014 at 2:39

Meligy

36.7k11 gold badges90 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

packetie Over a year ago

Previous comment didn't seem to make it, here is it again. Thanks! It helped.

OvrStkr · Accepted Answer · 2014-04-02 02:39:51Z

2

It seems like you have conflicting styles. You may want to try a CSS resetter. http://meyerweb.com/eric/tools/css/reset/

answered Apr 2, 2014 at 2:39

OvrStkr

212 bronze badges

Collectives™ on Stack Overflow

HTML list formatting

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related