How do I display a list horizontally rather than vertically?

Tutorial Categories:

Author: Deron Eriksson

Description: This CSS example describes how to display a list horizontally instead of vertically.

Tutorial created using: Windows XP

With CSSW, it's easy to display a list horizontally rather than vertically via a declaration setting the "display" property to "inline". As an example, in style-test.html below, we have two class selectors, ".vertical" and ".horizontal". The ".vertical" selector sets the background-color to "yellow", while the ".horizontal" selector sets the display to "inline" and sets the background-color to "aqua". Below that, we have two HTMLW unordered lists. The <li> elements of the first list have a class of "vertical", while the <li> elements of the second list have a class of "horizontal".

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
.vertical { background-color: yellow; }
.horizontal { display: inline; background-color: aqua; }
</style>
</head>
<body>
<ul>
<li class="vertical">Vertical One</li>
<li class="vertical">Vertical Two</li>
<li class="vertical">Vertical Three</li>
</ul>
<ul>
<li class="horizontal">Horizontal One</li>
<li class="horizontal">Horizontal Two</li>
<li class="horizontal">Horizontal Three</li>
</ul>
</body>
</html>

If we view style-test.html in a browser such as IE7, we see the following:

The first list displays vertically, which is the default. The second list displays horizontally since the <li> elements have their "display" property to set to a value of "inline".

AVAJAVA Web Tutorials

Total Categories: 24, Total Tutorials: 508

Cascading Style Sheets: 15 of 47 tutorials

style-test.html

Related Tutorials: