## Display List Items "Inline"

Unordered List | Inline List Items | Inline List Items

Example 10.51
Example 10.51 Source:
<ul id="conferences" > <li>Big XII</li> <li>Ivy League</li> <li>Pac 10</li> </ul>
In style element (`<style type="text/css">`) within head element:
ul#conferences { list-style: none; } ul#conferences li { display: inline; }
Example 10.51 Rendered:

- With Styles
- Without Styles

Example 10.52
Example 10.52 Source:
<ul id="conferencenav" > <li><a href="http://big12sports.collegesports.com/" shape="rect" >Big XII</a></li> <li><a href="http://www.ivyleaguesports.com/" shape="rect" >Ivy League</a></li> <li><a href="http://www.pac-10.org/" shape="rect" >Pac 10</a></li> </ul>
In example52.css
ul#conferencenav { list-style: none; padding-bottom: 0.5em; border-bottom: 2px solid black; font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; color: #990000; } ul#conferencenav li { display: inline; margin: 0; } ul#conferencenav a{ padding: 0.5em 1em; margin-right: 0.25em; background-color: #dddd00; border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black; text-decoration: none; } ul#conferencenav a:link, ul#conferencenav a:visited { color: #990000; } ul#conferencenav a:hover { color: #dddd00; background-color: #990000; }
In head element:
<link rel="stylesheet" type="text/css" href="example52.css"/>
Example 10.52 Rendered:

- With Styles
- Without Styles

Inspired by: CSS Cookbook by Christopher Schmitt