HTML における li タグの水平配置の例

ほとんどのナビゲーションバーは、下の図に示すように水平に配置されていますが、これはどのように実現されているのでしょうか?実際には、<ul> タグ内の li の水平配置が主に使用されます。次の例では、その実装方法を詳しく説明します。

1水平メニューのHTMLコード構造を書く

<ul id="メニュー">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="//www.jb51.net">Jb51.net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo! ドットコム</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>

2. CSSコードを書く

<1>共通スタイルを設定する

<スタイル タイプ="text/css">
    #メニュー{ 
        font:12px verdana, arial, sans-serif; /* テキストサイズとフォントスタイルを設定します */
        幅: 100%;
    }
    #メニュー、#メニューli {
        list-style:none; /* デフォルトのリストシンボルを削除します*/
        padding:0; /* デフォルトのパディングを削除します*/
        margin:0; /* デフォルトのマージンを削除します*/
        float: left; /* 左に浮動する */
        表示: ブロック;
}

<2>リンクスタイルを設定する

<スタイル タイプ="text/css">
    #メニュー li a {
        display:block; /* ブロックレベル要素へのリンクを設定します */
        width:150px; /* 幅を設定 */
        height:30px; /* 高さを設定 */
        line-height:30px; /* 行の高さを設定します。行の高さと高さを同じ値に設定すると、1行のテキストを垂直方向に中央揃えできます*/
        text-align:center; /* テキストを中央揃えにする */
        background:#3A4953; /* 背景色を設定 */
        color:#fff; /*テキストの色を設定*/
        text-decoration:none; /* 下線を削除*/
        border-right:1px solid #000; /* 左側に区切り線を追加します */
}
</スタイル>

<3>リンクホバー効果

<スタイル タイプ="text/css">
    #メニュー li a:hover {
    background:#146C9C; /* 背景色を変更する*/
    color:#fff; /* テキストの色を変更する*/
    }
</スタイル>

<4>左端のナビゲーションバーの右端の境界線を削除します

<スタイル タイプ="text/css">
    #メニュー li a.last {
    border-right:0; /* 左の境界線を削除します*/
    }
</スタイル>

3 完全なコード

<!DOCTYPE html>
<html>
<ヘッド>
	<メタ文字セット="utf-8">
	<title>画像プロンプト効果</title>
	<script src="../jquery-3.3.1.min.js"></script>
    <スタイル タイプ="text/css">
        #メニュー{ 
            font:12px verdana, arial, sans-serif; /* テキストサイズとフォントスタイルを設定します */
            幅: 100%;
        }
        #メニュー、#メニューli {
            list-style:none; /* デフォルトのリストシンボルを削除します*/
            padding:0; /* デフォルトのパディングを削除します*/
            margin:0; /* デフォルトのマージンを削除します*/
            float: left; /* 左に浮動する */
            表示: ブロック;
        }
        #メニュー li a {
            display:inline-block; /* リンクをブロックレベル要素として設定します */
            width:150px; /* 幅を設定 */
            height:30px; /* 高さを設定 */
            line-height:30px; /* 行の高さを設定します。行の高さと高さを同じ値に設定すると、1行のテキストを垂直方向に中央揃えできます*/
            text-align:center; /* テキストを中央揃えにする */
            background:#3A4953; /* 背景色を設定 */
            color:#fff; /*テキストの色を設定*/
            text-decoration:none; /* 下線を削除*/
            border-right:1px solid #000; /* 左側に区切り線を追加します */
        }
        #メニュー li a:hover {
            background:#146C9C; /* 背景色を変更する*/
            color:#fff; /* テキストの色を変更する*/
        }
        #メニュー li a.last {
            border-right:0; /* 左の境界線を削除します*/
        }
</スタイル>
 
</head>
<本文>
    <ul id="メニュー">
        <li><a href="http://www.baidu.com">Baidu.Com</a></li>
         <li><a href="//www.jb51.net">Jb51.net</a></li>
         <li><a href="http://www.yahoo.com">Yahoo! ドットコム</a></li>
         <li><a href="http://www.google.com" class="last">Google.Com</a></li>
    </ul>
</本文>
</html>

オンライン操作

ヒント: 実行前にコードの一部を変更することができます

つまり、水平に配置するために最も重要なことは、<ui> タグのメインスタイルが display:balock であることです。

<li> の主なスタイルは display:inline-barlock、float:left、list-style:none です。

HTMLタグでのliの水平配置の実装例についてはこれで終わりです。より関連性の高いHTML liの水平配置コンテンツについては、123WORDPRESS.COMの以前の記事または以下の関連記事を検索してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: JavaScript でクールなマウステーリング効果を実装

>>: シンプルな CSS テキストアニメーション効果