1. <ul class="between">
  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="around">
  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: flex;
  3. }
  4. ul.between {
  5. justify-content: space-between;
  6. margin-bottom: 10px;
  7. }
  8. ul.around {
  9. justify-content: space-around;
  10. }
  11. li a { position: relative; }
  12. li:nth-child(1) a { background: tomato; }
  13. li:nth-child(2) a { background: orange; }
  14. li:nth-child(3) a { background: gold; }
  15. li:nth-child(4) a { background: yellowgreen; }
  16. li:nth-child(5) a { background: skyblue; }
  17. li:nth-child(1) a:hover { background: #f93918; }
  18. li:nth-child(2) a:hover { background: #f98b00; }
  19. li:nth-child(3) a:hover { background: #f9c800; }
  20. li:nth-child(4) a:hover { background: #7dbb00; }
  21. li:nth-child(5) a:hover { background: #65bde0; }