CSS nested lists into multiple columns

Question

I would like to display nested lists in columns, as is frequently used in page footers.

<ul>
    <li>
        Header 1 
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </li>
    <li>
        Header 2 
        <ul>
            <li>Item 1.2</li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

And I'd like the result to look like:

Header 1         Header 2
Item 1           Item 1.2
Item 2           Item 2.2

I have been playing with display:inline and display:block for a while and cannot get it to show up correctly.

80PoundsOfFury · Accepted Answer · 2013-10-10 18:51:39Z

3

Here's a solution that uses the "oh, so cool" display: inline-block; http://jsfiddle.net/b9MWz/4/

ul{
   padding: 0;
   list-style: none; /*remove bullets*/
}

ul li{    
   display: inline-block;
    width: 20%; /*or whatever unit*/

}

ul li ul, ul li ul li{
    display: static;
    width: 100%;

}

and a solution that uses float: http://jsfiddle.net/8F8Uy/3/

ul{
    padding: 0;
    list-style: none; /*remove bullets*/
}

ul li{    
    float: left;
    width: 20%; /*or whatever unit*/

}

ul li ul, ul li ul li{
    float: none; /* un-"float" */
    width: 100%;

}

answered Oct 10, 2013 at 18:51

80PoundsOfFury

2642 silver badges8 bronze badges

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

Comments

Micah · Accepted Answer · 2013-10-10 18:42:31Z

1

Maybe:

<ul>
    <li style="float:left;">
        Header 1 
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </li>
    <li style="float:left;">
        Header 2 
        <ul>
            <li>Item 1.2</li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

answered Oct 10, 2013 at 18:42

Micah

10.4k13 gold badges70 silver badges97 bronze badges

1 Comment

SaltyNuts Over a year ago

Picked this one as the most concise example of correct element to use.

Pravin W · Accepted Answer · 2013-10-10 18:45:29Z

You may be looking for something like below code, but there are few other ways too to achieve this, as this depends upon your page structure and final goal

1) as you have nested list and we want to target width and float property only till first children we have used '>' sign in .footer-list > li selector.

2) also you may define width in pixel or percentage for .footer-list > li . Its uptp you.

3) you may need to clear float on parent .footer-list

<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
<style type="text/css">

  *{
    padding:0;
    margin:0
  }

  ul li{
    list-style:none;
  }
  .footer-list{
    padding:10px;
  }
  .footer-list > li{
    /*width:300px;*/ /* you may un comment this line and comment below line width in %*/

    width:20%;
    float:left;
  }


</style>
</head>

<body>
<ul class="footer-list">
    <li>
        Header 1 
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </li>
    <li>
        Header 2 
        <ul>
            <li>Item 1.2</li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

</body>
</html>

hope this fits your need.

Silvanu · Accepted Answer · 2013-10-10 18:48:10Z

0

Give to the first ul tag the class "myul"

<ul class="myul">
    <li>
        Header 1 ...

and use this css code:

        ul.myul{
            list-style: none;
        }
        ul.myul>li{
            float:left;
            padding-right: 30px;
        }
        ul.myul ul{
            list-style: none;
            padding: 0; 
            margin: 0;
        }

answered Oct 10, 2013 at 18:48

Silvanu

6014 silver badges7 bronze badges

Collectives™ on Stack Overflow

CSS nested lists into multiple columns

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related