Multiple Row UL | Multi-Line List | CSS

Multiple Row UL | Multi-Line List | CSS | HTML

Last Updated on Tuesday, 08 November 2011 19:15 Written by Nicholas Dunbar

I wanted to have a list where each element wrapped according to its containers dimensions. Lets start first with the problem I had, then move on to the solution.

so you have something like the below list (which has a bounding box in orange) but the list (UL, LI) extends out of the box.

View
CMF
Edit
Membership
Order History
Contact
Newsletter Subscriptions

<p>So if you want the list to conform to the box and put as many list elements (LI) on each row or line..</p>

So if you want the list to conform to the box and put as many list elements (LI) on each row or line..

you can do this:

View
CMF
Edit
Membership
Order History
Contact
Newsletter Subscriptions

The HTML and CSS are as follows for this multi-row list:

 

<style type="text/css">
ul.miltiline {   
        height: 40px;
       line-height: normal;
       margin: 0px;;   
}
ul.miltiline li {    
        display: inline;  
        line-height: 44px;  
        float: left;  
        margin-left: 5px;  
        margin-bottom: -8px; 
} 
</style>
<div style="
display: block;
line-height: 15px;
width: 200px;
height: 114px;
border: orange;
border-width: 2px;
border-style: solid;
">                                                          
<ul class="miltiline">
    <li>
        <a href="#1">View</a>
    </li> 
    <li>
        <a href="#2">CMF</a>
    </li> 
    <li>
        <a href="#3">Edit</a>
    </li> 
    <li>
        <a href="#4">Membership</a>
    </li> 
    <li>
        <a href="#5">Order History</a>
    </li> 
    <li>
        <a href="#6">Contact</a>
    </li> 
    <li>
        <a href="#7">Newsletter Subscriptions</a>
    </li> 
</ul>
</div>

This did not work in all browsers so I made the following modifications:

 


ul.tabs {
display: block;
list-style-type: disc;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
width: 200px;
}

li.tabs {
min-height: 5px;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
margin-left: 2px;
padding-right: 8px;
padding-left: 8px;
zoom: 1;
_height: 5px;
background-color: #F09911;
}

And then you can apply it to HTML like this:

 
<ul class="tabs">
   <li class="tabs"></li>
   <li class="tabs"></li>
</ul>

I hope this helps

Set as favorite

Bookmark

Email This

Trackback(0)

TrackBack URI for this entry

Comments (1) add comment

Subscribe to this comment's feed

Sleek said:

	Thanks. Worked like a charm
	report abuse vote down vote up

July 17, 2011 | url
Votes: +0

Write comment