W3School TIY Editor
W3CSTUDY オンライン チュートリアル
方向を変更
ダーク モード
コードの実行
<!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 class="note"><span>注:</span> ブラウザのサイズを変更すると、リンクが混雑すると自動的に折り返されます。 </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>