Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## 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) | <ul id="extglobalnav"><li>About</li><li>Calendar</li><li>Courses</li><li>Contact Us</li><li>Faculty Directory</li><li>Login</li></ul>ul#extglobalnav { list-style: none; }

- 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) | <ul id="extglobalnav"><li>About</li><li>Calendar</li><li>Courses</li><li>Contact Us</li><li>Faculty Directory</li><li>Login</li></ul>ul#extglobalnav { list-style: none; padding-left: 0; } ul#extglobalnav li { display: inline; padding-left: 2em; }

- 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