HTMLのタグにおけるLIの水平方向の配置の実装例

著者：Eve Cole 更新時間：2025-05-07 09:16:01

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

1.水平方向のメニューHTMLコードスキーマを書きます

<ul id = menu> <li> <a href = http：//www.baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> jb51.net </a> </li> <li> <a href = http：//ww.yahoo.com <li> <a href = http：//www.google.com class = last> google.com </a> </li> </ul>

2ライティングCSSコード

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

<style type = text/css> #menu {font：12px verdana、arial、sans-serif; /*テキストサイズとフォントスタイルの設定*/幅：100％; } #menu、#menu li {list-style：none; / *デフォルトのリストシンボルを削除 */パディング：0; / *デフォルトの内側マージンを削除 */マージン：0; / *デフォルトの外側マージンを削除 */ float：左; /*左に浮かぶ*/ display：block;}

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

<style type = text/css> #menu li a {display：block; /*ブロックレベルの要素にリンクを設定*/幅：150px; /*幅を設定*/高さ：30px; /*高さを設定*/ line-height：30px; /*線の高さを設定し、線の高さと高さと同じ値を設定して、単一のテキストを垂直に中央に配置できるようにします*/ TEXT-ALIGN：CENTER; /*センターアラインドテキスト*/背景：＃3A4953; /*背景の色を設定*/ color：#fff; /*テキストの色を設定*/テキストデコレーション：なし; /* Underscoreを削除*/ border-right：1px solid＃000; / *左側に仕切りを追加 */} </style>

<3>リンクホバー効果

<style type = text/css> #menu li a：hover {background：＃146c9c; /*背景色の変更*/ color：#ffff; /*テキストの色を変更*/} </style>

<4>左端のナビゲーションバーの右の箱を取り外す

<style type = text/css> #menu li a.last {border-right：0; /*左の境界線を削除*/} </style>

3完全なコード

<！doctype html> <html> <head> <meta charset = utf-8> <title>画像プロンプト効果</title> <script src = ../jquery-3.3.1.min.js> </scrip> <style type = text/css> #menu {font：12px verdana、arial、sans-serif; /*テキストサイズとフォントスタイルの設定*/幅：100％; } #menu、#menu li {list-style：none; / *デフォルトのリストシンボルを削除 */パディング：0; / *デフォルトの内側マージンを削除 */マージン：0; / *デフォルトの外側マージンを削除 */ float：左; /* Float Left*/ display：block; } #menu li a {display：inline-block; /*ブロックレベルの要素にリンクを設定*/幅：150px; /*幅を設定*/高さ：30px; /*高さを設定*/ line-height：30px; /*線の高さを設定し、同じ値を線の高さと高さに設定して、単一のテキストを垂直に中央に配置できるようにします*/ TEXT-ALIGN：CENTER; /*センターアラインドテキスト*/背景：＃3A4953; /*背景の色を設定*/ color：#fff; /*テキストの色を設定*/テキストデコレーション：なし; /*下線を削除*/ border-right：1px solid＃000; / *左側に仕切りを追加 */} #menu li a：hover {background：＃146c9c; /*背景の色を変更します*/ color：#fff; /*テキスト色の変更*/} #menu li A.last {border-right：0; /*左の境界を削除*/} </style> </head> <body> <ul id = menu> <li> <a href = http：//www.baidu.com> baidu.com </li> <li> < href = http：//www.yahoo.com> yahoo.com </a> </li> <li> <a href = http：//www.google.com class = last> google.com </li> </ul> </body> </html>

オンラインで実行します

<！doctype html> <html> <head> <meta charset = "utf-8"> <title>画像プロンプトエフェクト</title> <script src = "../ jquery-3.3.1.min.js"> </script> <style type = "text/css">＃menu {font：12px verdana、arial、arial、arial、arial、arial、arial /*テキストサイズとフォントスタイルの設定*/幅：100％;}＃メニュー、#menu li {list-style：none; / *デフォルトのリストシンボルを削除 */パディング：0; / *デフォルトの内側マージンを削除 */マージン：0; / *デフォルトの外側マージンを削除 */float：左; /*左のフロート*/display：block;}＃メニューli a {display：inline-block; /*ブロックレベルの要素にリンクを設定*/幅：150px; /*幅を設定*/高さ：30px; /*高さを設定*/line-height：30px; /*線の高さを設定し、線の高さと高さと同じ値を設定して、単一のテキストを垂直に中央に配置できるようにします*/TEXT-ALIGN：CENTER; /*センターアラインドテキスト*/背景：＃3A4953; /*背景の色を設定*/color：#fff; /*テキストの色を設定*/テキストデコレーション：なし; /* Underscoreを削除*/border-right：1px solid＃000; / *左側に仕切りを追加 */}＃メニューli A：hover {background：＃146c9c; /*背景色の変更*/color：#ffff; /*テキスト色の変更*/}＃メニューli a.last {border-right：0; /*左の境界を削除*/} </style> </head> <body> <p> wulin.net </p> <ul id = "menu"> <li> <a href = "http://www.baidu.com"> baidu.com </a> </li> <li> <a href = "// www.vevb.com"> jb51.net </a> </li> <li> <a href = "http://www.yahoo.com"> yahoo.com </a> </li> <li> <a href = "http://www.google.com"> google.com </a> </li> </ul> </body> </html>

ヒント：最初にいくつかのコードを変更してから実行できます

要するに、水平に配置するために最も必要なものは次のとおりです。<ui>タグのメインスタイルは表示です：Balock;

<li>の主なスタイルはディスプレイです。インラインバロック、フロート：左、リストスタイル：なし;

これは、HTMLのタグにおけるLi Horizontal配置の実装例に関する記事です。より関連するHTML Li Horizontal Arfformingコンテンツについては、Wulin.comの以前の記事または以下の関連記事を検索してください。将来、誰もがwulin.comをサポートすることを願っています！