1. <ul>
  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>
  1. ul {
  2. display: table;
  3. position: relative;
  4. margin: 0 auto;
  5. border-collapse: collapse;
  6. }
  7. li {
  8. display: table-cell;
  9. overflow: hidden;
  10. vertical-align: middle;
  11. }
  12. li:nth-child(n+2) {
  13. padding-left: 1px;
  14. }
  15. li a {
  16. margin: -4em 0;
  17. padding: 5em 1em;
  18. background: #86c0de;
  19. }
  20. li a:hover {
  21. background: #68abcd;
  22. }
  23. @media screen and (max-width: 767px) {
  24. ul, li {
  25. display: block;
  26. }
  27. li:nth-child(n+2) {
  28. padding-top: 1px;
  29. padding-left: 0;
  30. }
  31. li a {
  32. margin: 0;
  33. padding: 1em;
  34. }
  35. }