HTML CSS

RESPONSIVE HORIZONTAL LIST

(a quick guide)

JUST A "REGULAR" LIST <ul class="hlist">   <li>Borf</li> <li>Bonk</li>   <li>Doge</li> <li>Pupper</li>   <li>Doggo</li> <li>Woofer</li>   <li>Yapper</li> <li>Yipper</li> </ul>

REGULAR HTML LIST

01

"CONVERT" TO HORIZONTAL LIST .hlist {   display: flex; flex-wrap: wrap;   padding: 0; margin: 0; } .hlist li { list-style-type: none; }

HORIZONTAL LIST CSS

02

.hlist li {   margin: 5px; padding: 10px;   border-radius: 5px;   color: #fff; background: #2e68bf; }

COSMETICS CSS

03