960.css

Appearance

List Styles with 960.css ​

960.css Grid Lightness Styles includes utility classes for styling and managing lists on your website. This guide covers the list-related classes available in the library.

List Classes ​

Use the following list classes to customize the appearance of your lists:

  • list-reset: Remove default list styling (list-style: none)
  • list-inline: Display a list horizontally (inline list)
  • list-inline-block: Display list items as inline-block elements
  • list-center: Center align list items

Example: ​

html
<ul class="list-reset">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="list-inline-block">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="list-center">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>