ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS のインライン リスト項目を使用して水平ナビゲーション バーを構築する

CSS のインライン リスト項目を使用して水平ナビゲーション バーを構築する

PHPz
リリース: 2023-08-29 14:29:11
転載
620 人が閲覧しました

使用 CSS 中的内联列表项构建水平导航栏

インライン リスト項目を使用して水平ナビゲーション バーを作成します。

  • 要素をインラインに設定します。

    次のコードを実行して、水平ナビゲーション バーを作成してみることができます:

    ライブ デモ

    <!DOCTYPE html>
    <html>
       <head>
          <style>
             ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
             }
             .active {
                background-color: #4CAF50;
                color: white;
             }
             li {
                border-bottom: 1px solid #555;
                display: inline;
             }
          </style>
       </head>
       <body>
          <ul>
             <li><a href = "#home">Home</a></li>
             <li><a href = "#company" class="active">Company</a></li>
             <li><a href = "#product">Product</a></li>
             <li><a href = "#services">Services</a></li>
             <li><a href = "#contact">Contact</a></li>
          </ul>
       </body>
    </html>
    ログイン後にコピー
  • 以上がCSS のインライン リスト項目を使用して水平ナビゲーション バーを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    ソース:tutorialspoint.com
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート