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
This page was last modified on 2024-10-04 08:55:13