How To Make a Horizontal Ordered List With CSS

| 0 comments

Horizontal numbered list
The digital services in Danish public libraries are not known for offering the best user experience. More often than not, it requires detailed explanations and step-by-step walkthroughs before you get to the content. It is all due to copyright agreements and licenses, but that is a different matter.

Related to an explanatory walkthrough of one of these services, I needed to create a step-by-step list. To utilize the screen real estate I wanted to make the list horizontal. This is how I solved it.

Mark Up

The HTML is a classic ordered list.

<ol class="steps">
  <li><strong>Item 1</strong><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non gravida ante. Curabitur nec fermentum nisi, non interdum tortor. Pellentesque ac sapien sem.
  </li>
  <li><strong>Item 2</strong><br />
    In blandit, justo tincidunt condimentum rhoncus, lectus sem scelerisque justo, quis tincidunt risus nunc vitae turpis. Suspendisse et aliquet nibh.
  </li>  
  <li><strong>Item 3</strong><br />
    Nullam a mollis mauris. Nam dictum nibh sed pharetra rhoncus. Sed posuere sed lacus quis congue. Integer sodales porttitor quam, at auctor sem tincidunt quis.
  </li>
  <li><strong>Item 4</strong><br />
    Phasellus rutrum, elit vitae rutrum sodales, sem mauris luctus libero, non convallis leo dui sed quam. Duis blandit magna sit amet ornare dapibus.
  </li>
</ol>

Styling

The CSS looks like this. It is tested and works in IE8, but the red dots are rectangular instead of circular.

.steps {
  counter-reset: my-really-cool-counter;
  margin: 4em 0;
}
.steps li {
  font: normal 1em/1.5em Helvetica, Sans-Serif;
  position: relative;
  padding: 0 0 1.5em 3em;
  list-style: none;
}
.steps li:before {
  content: counter(my-really-cool-counter);
  counter-increment: my-really-cool-counter;
  color: #fff;
  display: block;
  left: 0;
  line-height: 2em;
  position: absolute;
  text-align: center;
  text-shadow: 0 2px 0 #cc0000;
  top: 0;
  width: 2em;
  z-index: 2;
}
.steps li:after {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 0;
  width: 0;
  background: #f00;
  border: 1em solid #f00;
  z-index: 1;
}
.steps li:first-child:nth-last-child(1) {
  width: 90%;
  width: calc(100% - 3em);
}
.steps li:first-child:nth-last-child(2), .steps li:first-child:nth-last-child(2) ~ li {
  min-width: 8em;
  width: 45%;
  width: calc(50% - 4em);
  float: left;
  padding-right: 1em;
}
.steps li:first-child:nth-last-child(3), .steps li:first-child:nth-last-child(3) ~ li {
  min-width: 8em;
  width: 27.5%;
  width: calc(33.333% - 4em);
  float: left;
  padding-right: 1em;
}
.steps li:first-child:nth-last-child(4), .steps li:first-child:nth-last-child(4) ~ li {
  min-width: 6em;
  width: 20%;
  width: calc(25% - 4em);
  float: left;
  padding-right: 1em;
}

If you want to know what is happening, I have also made a commented example in SASS syntax on Codepen.

Credits to Lea Verou for styling of the grid and to Roger Johansson for styling of the ordered, numbered lists.

Translations: Danish

Author: Morten Brunbjerg Bech

Webdesigner, front end udvikler og bibliotekar. Arbejder primært med udvikling og design af Horsens Kommunes Bibliotekers webløsninger og er specialist i semantisk strukturering af webdokumenter samt Adobe Photoshop og Illustrator.

Leave a Reply