Home
CSS
CSS Inline-block
Tryit: Use display: inline-block to display list items horizontally
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <style> .nav { background-color: lightgray; list-style-type: none; margin: 0; padding: 0; } .nav li { display: inline-block; font-size: 18px; padding: 15px; } </style> </head> <body> <h1>Horizontal Navigation Menu</h1> <p>List items are displayed vertically by default. Here, we use display: inline-block to display them horizontally (side by side).</p> <ul class="nav"> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#clients">Our Clients</a></li> <li><a href="#contact">Contact Us</a></li> </ul> </body> </html>
