<div class="container">
  <h2 class="container__title">Left Aligned</h2>
  <ul class="list list--inline">
    <li>Alpha</li>
    <li>Alpha</li>
    <li>Alpha</li>
    <li>Alpha</li>
    <li>Alpha</li>
    <li>Alpha</li>
    <li>Alpha</li>
  </ul>
</div>

<div class="container">
  <h2 class="container__title">Center Aligned</h2>
  <ul class="list list--inline list--align-center">
    <li>Alpha</li>
    <li>Alpha</li>
    <li>Alpha</li>
    <li>Alpha</li>
    <li>Alpha</li>
    <li>Alpha</li>
    <li>Alpha</li>
  </ul>
</div>
.list {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

.list--inline {
  display: inline-block;
  
  > li {
    display: inline;
    
    & + li {
      margin-left: 1.5em;
    }
  }
}

.list--align-center {
  text-align: center;
}

// Not important. Just styling content of the example
.container {
  background-color: #ffeef0;
  max-width: 15em;
  margin: 0 auto;
  
  & + & {
    margin-top: 1em;
  }
}

.container__title {
  background: #fff;
  font-size: .75em;
  color: gray;
  font-weight: normal;
  margin: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.