Normally a HTML-list is displayed vertically, which means that each entry is below the previous entry. But for some reasons you might want to display the list vertically, e.g. for a menubar.
Here is a simple way to do that.
For this example I’ll use the following list:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
The result looks like this:
- Item 1
- Item 2
- Item 3
Now, we add some CSS:
<style> li { display:inline; } </style> |
With display:inline, we tell the list-items (<li>), which are block elements that they should behave like an inline-element. And so they are displayed horizontally.
We also remove the bullet points, add some space between them and add a border. By giving the list an id “demo”, I can limit this CSS-behaviour to this list.
<style> #demo li { /* display inline */ display:inline; /* remove list-symbols */ list-style-type=none; /* set margin-right for each item */ margin-right:15px; /* border */ border:solid 1px #114477; /* set padding for each item */ padding:5px; /* background-color for each item */ background-color:#336699; /* text-color */ color:#ffffff; } </style> |
<ul id="demo"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
Now, the list looks like this:
- Item 1
- Item 2
- Item 3
So, have fun with HTML and CSS 🙂
(Visited 1,258 times, 1 visits today)