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

## Inline and Inline-block Lists

Key points:

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

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

or

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

### list-style: none

Example 6.3 - list-style: none; - Example 6.3 (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 6.4 - list-style: none; - Example 6.4 (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;
    }

### li {display: inline-block;}

Example 6.5 - list-style: none; - Example 6.5 (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-block;
      width: 8em;
      border: thin solid black;
      margin-right: 3px;
      text-align: center
    }

Copyright © David Heitmeyer