CSU Ram Head Logo

JTC 372

Web Design and Management

CSS List Navigation Example

HTML

<nav>
        <ul>
           <li><a href="#">Item 1</a></li>
           <li><a href="#">Item 2</a></li>
           <li><a href="#">Item 3</a></li>
           <li><a href="#">Item 4</a></li>
           <li><a href="#">Item 5</a></li>
        </ul>
</nav>

 

CSS (Flex Method)

 

nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around; }

nav li { padding: 5px; }

nav a { color: #FFF; }

 

CSS (Legacy Float Method)

 

 

nav { overflow: auto; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav li { float: left; width: 20%; padding-top: 5px; padding-bottom: 5px; text-align: center; }

nav a { color: #FFF; }

Note: Set next div after #nav to have clear: both;