title: Render horizontal list items starting at the bottom
body: <p>How can I create a multi-row unordered list with the bottom row containing the full width of list items?</p>
  <p>Normally it renders in this way:</p>
  <blockquote>
  <p>Item1 Item2 Item3 Item4 Item5 Item6 Item7</p>
  <p>Item8 Item9</p>
  </blockquote>
  <p>How can I achieve the following?</p>
  <blockquote>
  <p>Item8 Item9</p>
  <p>Item1 Item2 Item3 Item4 Item5 Item6 Item7</p>
  </blockquote>
  <p>What I have tried in CSS is:</p>
  <pre><code>.footer { width: 500px; overflow: hidden; background-color:#ccc; }
  .footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
  .footer ul li { position: relative; float: left; display: block; right: 50%; }
  </code></pre>