Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2020

## Lists that don't look like lists

Key points:

- remove list styling
- change from "block" to "inline" display

`ul { list-style: none; }`
`li { display: inline; }`

### list-style: none

Example 4.30 - list-style: none; - Example 4.30 (Without Styles)

- Markup
- Style
- Screenshot

    <ul id="extglobalnav">
    <li>About</li>
    <li>Calendar</li>
    <li>Courses</li>
    <li>Contact Us</li>
    <li>Faculty Directory</li>
    <li>Login</li>
    </ul>

In `style` element (`<style type="text/css">`) within `head` element:

    ul#extglobalnav {
      list-style: none;
    }

### li {display: inline;}

Example 4.31 - list-style: none; - Example 4.31 (Without Styles)

- Markup
- Style
- Screenshot

    <ul id="extglobalnav">
    <li>About</li>
    <li>Calendar</li>
    <li>Courses</li>
    <li>Contact Us</li>
    <li>Faculty Directory</li>
    <li>Login</li>
    </ul>

In `style` element (`<style type="text/css">`) within `head` element:

    ul#extglobalnav {
      list-style: none;
      padding-left: 0;
    }
    ul#extglobalnav li {
      display: inline;
      padding-left: 2em;
    }

Copyright © David Heitmeyer