--- 
title: Compass Inline-Block List
crumb: Inline-Block List
framework: compass
stylesheet: compass/typography/lists/_inline-block-list.scss
layout: core
meta_description: set list-elements to inline-block so they appear horizontally while retaining their structure.
classnames:
  - reference
  - core
  - typography
---
- render 'reference' do
  :markdown
    Easy mode using simple descendant li selectors:
    
        ul.nav
          +inline-block-list
    
    Advanced mode:
    If you need to target the list items using a different selector then use
    +inline-block-list-container on your ul/ol and +inline-block-list-item on
    your li. This may help when working on layouts involving nested lists. For 
    example:
    
        ul.nav
          +inline-block-list-container
          > li
            +inline-block-list-item
