W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!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>水平导航链接</h1> <p>默认地，列表项是垂直显示的。在本例中，我们使用 display: inline-block 来水平地显示它们（并排）。</p> <p>注释：如果您调整浏览器的大小，链接会在变得拥挤时自动换行。</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>