HTML
I'd like the inner ul to also have its bullet justified with the leftmost margin of the text of the outer bullet, but no matter what I do (ul ul ul, ul ul li ul, ul li ul ul, ul li ul li ul, ul > ul, putting ul ul ul as a separate block, putting that separate block first, removing padding-left from that separate block), the third-level bullet refuses to align itself with the text of the second-level bullet, instead aligning to the bullet itself. That is to say, I want it to look like this:
I have a feeling list-style-position: inside is screwing up the browser's idea of where the left margin of the second level bullet is... Is there a solution to this problem that does not involve manually setting padding values and just using those (which is what Sik suggested)? Thanks.
<ul>
<li>foo
<ul>
<li>adsdas</li>
<li>adsdas</li>
<li>adsdas</li>
<li>adsdas
<ul>
<li>abc</li>
</ul>
</li>
<li>asdasd</li>
</ul>
</li>
</ul>
CSS
ul ul {
list-style-position: inside;
padding-left: 0px;
}
Or try a playground: http://jsfiddle.net/PGVnB/1/I'd like the inner ul to also have its bullet justified with the leftmost margin of the text of the outer bullet, but no matter what I do (ul ul ul, ul ul li ul, ul li ul ul, ul li ul li ul, ul > ul, putting ul ul ul as a separate block, putting that separate block first, removing padding-left from that separate block), the third-level bullet refuses to align itself with the text of the second-level bullet, instead aligning to the bullet itself. That is to say, I want it to look like this:
- level 1
- level 2
- level 2
- level 3
- level 2
I have a feeling list-style-position: inside is screwing up the browser's idea of where the left margin of the second level bullet is... Is there a solution to this problem that does not involve manually setting padding values and just using those (which is what Sik suggested)? Thanks.
This post has been edited by Andlabs: 28 April 2013 - 06:15 PM


00