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

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

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

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

- 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