HTMLの

タグ内のliは横に配置されます

最初のステップは、水平メニューのHTMLコード構造を記述することです

HTMLドキュメントのナビゲーションバー領域に次のコードを追加してください。

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="http://www.Code52.Net">Code52.Net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>

2 番目のステップ、CSS コードを記述します

1. パブリック スタイルを設定します

次の CSS コードを HTML ドキュメントの ...

<style type="text/css">
#menu { 
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>

ご存知のとおり、

内の項目
• を水平に配置するには CSS を定義する必要があります。

  ヒント: 独立して説明するためにナビゲーションバーを引き出しているため、本文または他の場所でデフォルトの効果をリセットしている場合は、上記のコードを削除できます

  。 2. テキストを水平に配置します

  ご存知のとおり、

  タグの下にある項目はデフォルトで垂直に配置されます。水平に配置するには、追加の CSS プロパティを定義する必要があります。

  <style type="text/css">
  #menu li { 
  float:left; /* 往左浮动 */
  }
  </style>

  ログイン後にコピー

  3. リンク スタイルを設定します:

  <style type="text/css">
  #menu li a {
  display:block; /* 将链接设为块级元素 */
  padding:8px 50px; /* 设置内边距 */
  background:#3A4953; /* 设置背景色 */
  color:#fff; /* 设置文字颜色 */
  text-decoration:none; /* 去掉下划线 */
  border-right:1px solid #000; /* 在左侧加上分隔线 */
  }
  </style>

  ログイン後にコピー
  各メニューを広くするために内側のマージン (つまりパディング) を使用します。中国語と英語が混在している場合は、高さとを 1 つ設定することをお勧めします。メニューの幅を設定すると、中国語と英語の文字の行の高さが一致しないことによって引き起こされる高さのエラーを回避できます。固定高さの設定方法:

  <style type="text/css">
  #menu li a {
  display:block; /* 将链接设为块级元素 */
  width:150px; /* 设置宽度 */
  height:30px; /* 设置高度 */
  line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
  text-align:center; /* 居中对齐文字 */
  background:#3A4953; /* 设置背景色 */
  color:#fff; /* 设置文字颜色 */
  text-decoration:none; /* 去掉下划线 */
  border-right:1px solid #000; /* 在左侧加上分隔线 */
  }
  </style>

  ログイン後にコピー

  4. リンクホバー効果:

  上記の手順の複合効果により、水平ナビゲーション バーの予備的なフレームワークが表示されます。このステップは主に、ナビゲーション バーをより美しくするためにリンクのホバー効果を定義することです。もちろん、ナビゲーション バーをさらに輝かせたい場合は、CSS の hover プロパティで背景画像を定義できます。

  <style type="text/css">
  #menu li a:hover {
  background:#146C9C; /* 变换背景色 */
  color:#fff; /* 变换文字颜色 */
  }
  </style>

  ログイン後にコピー
  ここのコードには欠陥があります。右端に余分な境界線が表示されます。IE シリーズのブラウザでは :first-child 疑似クラスがサポートされていないため、削除するには別のスタイルを記述するしかありません。最後の境界線を指定して、HTML コードに追加のセレクターを追加します。

  <ul id="menu">
  <li><a href="http://www.baidu.com">Baidu.Com</a></li>
  <li><a href="http://www.Code52.Net">Code52.Net</a></li>
  <li><a href="http://www.yahoo.com">Yahoo.com</a></li>
  <li><a href="http://www.google.com" class="last">Google.com</a></li>
  </ul>
  
  <style type="text/css">
  #menu li a.last {
  border-right:0; /* 去掉左侧边框 */
  }
  </style>

  ログイン後にコピー
  さて、シンプルな水平ナビゲーション メニューが作成されました。とてもシンプルではないでしょうか。 完全なコードを以下に示します:

  <style type="text/css">
  #menu { 
   font:12px verdana, arial, sans-serif; 
  }
  #menu, #menu li {
   list-style:none;
   padding:0;
   margin:0;
  }
  #menu li { 
   float:left; 
  }
  #menu li a {
   display:block;
   /* 如果是中英文混排的文字，建议用固定宽度
   width:150px;
   height:30px;
   line-height:30px;
   text-align:center;
   */
   padding:8px 50px;
   background:#3A4953;
   color:#fff;
   text-decoration:none;
   border-right:1px solid #000;
  }
  #menu li a:hover {
   background:#146C9C;
   color:#fff;
   text-decoration:none;
   border-right:1px solid #000;
  }
  #menu li a.last {
   border-right:0; /* 去掉左侧边框 */
  }
  </style>

  ログイン後にコピー
  私たちが作成したオンライン デモを表示し、この記事で提供されているサンプル パッケージをダウンロードできます。
  上記のCSSスタイルを変更しました。次のように:

  以上がHTMLの

  タグ内のliは横に配置されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。