Home
HTML
HTML
Tryit: HTML
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!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">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#clients">我们的客户</a></li> <li><a href="#contact">联系我们</a></li> </ul> </body> </html>