1. <ul class="centering">
  2. <li><a>ボキャブラ天国</a></li>
  3. <li><a>ミュージックステーションスーパーライブ</a></li>
  4. <li><a>タモリ倶楽部</a></li>
  5. <li><a>世にも奇妙な物語</a></li>
  6. <li><a>ブラタモリ</a></li>
  7. </ul>
  8. <ul class="fullwidth">
  9. <li><a>ボキャブラ天国</a></li>
  10. <li><a>ミュージックステーションスーパーライブ</a></li>
  11. <li><a>タモリ倶楽部</a></li>
  12. <li><a>世にも奇妙な物語</a></li>
  13. <li><a>ブラタモリ</a></li>
  14. </ul>
  1. ul {
  2. display: table;
  3. border-collapse: collapse;
  4. }
  5. ul.centering {
  6. margin: 0 auto 10px;
  7. }
  8. ul.fullwidth {
  9. width: 100%;
  10. }
  11. li {
  12. display: table-cell;
  13. vertical-align: middle;
  14. }
  15. li:nth-child(n+2) {
  16. padding-left: 1px;
  17. }
  18. li a {
  19. background: #86c0de;
  20. }
  21. li a:hover {
  22. background: #68abcd;
  23. }