Creating horizontal HTML lists with CSS

This article covers horizontal HTML lists and some popular applications. We are used to see the HTML lists, <ul> or <ol>, as buletted lines. However with a few CSS tweaks we can reorder items in horizontal order.


Creating horizontal HTML list


In order to create horizontal <ul> or <ol> we have to modify the rendering mode not for the list itself, but its <li> elements. Adding display: inline will order them horizontally, list-style-type: none removes all bullets and numbers and adding some padding between separate elements prevents them from gluing together. This is the basic setup for such list. Let's see a few examples.


Horizontal page menu


Add some borders to the list items and you'll get nice looking horizontal buttons:

    <style type="text/css">
        ul.horizontal_menu li {
            display: inline;
            list-style-type: none;
            border: 1px solid #000;
            margin: 5px;
            padding: 2px;
        }
    </style>       
    <ul class="horizontal_menu">
        <li>Home</li>   
        <li>About us</li>   
        <li>History</li>   
        <li>Contacts</li>   
    </ul>


Basic tag cloud


Limit the <ul> to a box with some border and put different font sizes on each link to create tag cloud for your page:


    <style type="text/css">
        ul.tag_cloud {
            border: 1px solid #000;
            width: 200px;
            height: 200px;
            padding-left: 5px;
        }
        ul.tag_cloud li {
            display: inline;
            list-style-type: none;
            margin: 5px;
        }
    </style>   
    <ul class="tag_cloud">
        <li><a href="#" title="" style="font-size: 5px">small tag</a></li>   
        <li><a href="#" title="" style="font-size: 8px">very very very long tag</a></li>   
        <li><a href="#" title="" style="font-size: 16px">big tag</a></li>   
        <li><a href="#" title="" style="font-size: 10px">other kind of tag</a></li>   
        <li><a href="#" title="" style="font-size: 12px">tag next</a></li>   
        <li><a href="#" title="" style="font-size: 30px">another tag</a></li>   
        <li><a href="#" title="" style="font-size: 2px">new tag</a></li>   
        <li><a href="#" title="" style="font-size: 8px">tag last</a></li>   
    </ul>


Link list in the bottom of the page


Add delimiter symbol after every other list element and the footer list of links is ready:

    <style type="text/css">
        ul.footer li {
            display: inline;
            list-style-type: none;
            margin: 2px;
        }
        ul.footer li a {
            font-style: italic;
        }       
    </style>
    <ul class="footer">
        <li><a href="#" title="">footer link 1</a></li>
        <li>|</li>   
        <li><a href="#" title="">footer long link 2</a></li>
        <li>|</li>   
        <li><a href="#" title="">footer link 3</a></li>
        <li>|</li>   
        <li><a href="#" title="">footer long link 4</a></li>
    </ul>

See the results here.
 

 

No comments yet

Back to articles list

This page was last modified on 2017-02-23 01:19:49