A UL list where each element is wrapped according to its containers dimensions. Multiple row ul or multi-line list using CSS and HTML.

ul_wrap_example.html

<!--
This shows you how to take something like this:
http://www.actionscript-flash-guru.com/example_files/embed_scripts/multi_row_css_example.html
to this:
http://www.actionscript-flash-guru.com/example_files/embed_scripts/multi_row_css_example_2.html
-->


    <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>
    
<!--See the full article at http://www.actionscript-flash-guru.com/blog/46-multiple-row-ul-multi-line-list-css-html.php-->