1. <ul class="table">
  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="flexible">
  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. .table {
  2. display: table;
  3. width: 100%;
  4. margin-bottom: 10px;
  5. border-collapse: collapse;
  6. }
  7. .table li {
  8. display: table-cell;
  9. overflow: hidden;
  10. vertical-align: middle;
  11. }
  12. .tableli:nth-child(n+2) {
  13. padding-left: 1px;
  14. }
  15. .table li a {
  16. margin: -4em 0;
  17. padding: 5em 1em;
  18. background: #ddd;
  19. }
  20. .table li a:hover {
  21. background: #ccc;
  22. }
  23. .flexible,
  24. .flexible li,
  25. .flexible li a {
  26. display: flex;
  27. justify-content: center;
  28. }
  29. .flexible li,
  30. .flexible li a {
  31. flex-grow: 1;
  32. }
  33. .flexible li a {
  34. position: relative;
  35. align-items: center;
  36. }
  37. .flexible li:nth-child(1) a { background: tomato; }
  38. .flexible li:nth-child(2) a { background: orange; }
  39. .flexible li:nth-child(3) a { background: gold; }
  40. .flexible li:nth-child(4) a { background: yellowgreen; }
  41. .flexible li:nth-child(5) a { background: skyblue; }
  42. .flexible li:nth-child(1) a:hover { background: #f93918; }
  43. .flexible li:nth-child(2) a:hover { background: #f98b00; }
  44. .flexible li:nth-child(3) a:hover { background: #f9c800; }
  45. .flexible li:nth-child(4) a:hover { background: #7dbb00; }
  46. .flexible li:nth-child(5) a:hover { background: #65bde0; }
  47. .flexible li:nth-child(n+2) { padding-left: 1px; }