CSS: can I make nested list items justified with outer ones

Discussion in 'Technical Discussion' started by Andlabs, Apr 29, 2013.

  1. Andlabs

    Andlabs

    「いっきまーす」 Wiki Sysop
    2,175
    0
    0
    Writing my own MD/Genesis sound driver :D
    HTML
    Code (Text):
    1. <ul>
    2.     <li>foo
    3.         <ul>
    4.             <li>adsdas</li>
    5.             <li>adsdas</li>
    6.             <li>adsdas</li>
    7.             <li>adsdas
    8.                 <ul>
    9.                     <li>abc</li>
    10.                 </ul>
    11.             </li>
    12.             <li>asdasd</li>
    13.         </ul>    
    14.     </li>
    15. </ul>
    CSS
    Code (Text):
    1. ul ul {
    2.     list-style-position: inside;
    3.     padding-left: 0px;
    4. }
    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:
    Code (Text):
    1. - level 1
    2.   - level 2
    3.   - level 2
    4.     - level 3
    5.   - 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.
     
  2. Vangar

    Vangar

    Member
    3,639
    55
    28
    Isn't it as simple as this?

    http://jsfiddle.net/gfuDA/
     
  3. Andlabs

    Andlabs

    「いっきまーす」 Wiki Sysop
    2,175
    0
    0
    Writing my own MD/Genesis sound driver :D
    The issue with that is that we are still using the padding value there; I'd like it to work independently of any padding or margin values.
     
  4. Vangar

    Vangar

    Member
    3,639
    55
    28
    I'm not really sure how you'd get it to work without padding values, as that is how it usually works, doesn't it? With my solution you are giving the same padding values to every nested ul, so they should all work the same now matter how deep you go. What is the issue with using padding?
     
  5. Andlabs

    Andlabs

    「いっきまーす」 Wiki Sysop
    2,175
    0
    0
    Writing my own MD/Genesis sound driver :D
    Would the padding value need to chnge across different fonts, font sizes, or borwsers though? I'm trying to come up with a general solution.
     
  6. Dr. Kylstein

    Dr. Kylstein

    Member
    86
    0
    6
    You aren't using "em"s? It may not be exact for all fonts, but you should be able to get close and have it work at any size of a given font. (pixel positioning is evil.)
     
  7. Andlabs

    Andlabs

    「いっきまーす」 Wiki Sysop
    2,175
    0
    0
    Writing my own MD/Genesis sound driver :D
    Bah, maybe. If there really is no way to get it to be exact, thanks anyway.