主頁
CSS
CSS Inline-block
試一試：使用 display: inline-block 水平顯示列表項
執行 ❯
建立您
自己的
網站
×
改變方向
儲存程式碼
改變主題，深色/淺色
前往 Spaces
<!DOCTYPE html> <html> <head> <style> .nav { background-color: yellow; list-style-type: none; text-align: center; margin: 0; padding: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; } </style> </head> <body> <h1>Horizontal Navigation Links</h1> <p>By default, list items are displayed vertically. In this example we use display: inline-block to display them horizontally (side by side).</p> <p>Note: If you resize the browser window, the links will automatically break when it becomes too crowded.</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>
