display:flex

これは「ざっくり」いえば、縦のものを横にする、ということである。





ソース nav ul { display: flex; /* これを削除すると項目が縦に表示される */ list-style: none; margin: 0; padding: 20px 10px 0 10px; } nav li a { display: block; padding: 10px 20px; text-decoration: none; font-size: 14px; color: #ffffff; } nav li a:hover { background: #37a29B; border-radius: 10px 10px 0 0; }