ul の li 要素を水平方向に配置する方法についての詳細な図解説明 (コード付き)

li タグはリスト、タブ、ナビゲーションなどの作成に非常に多用途であるため、ページ レイアウトではよく li タグが使用されます。しかし、

タグの li はデフォルトで縦に配置されているため、li を横に配置できますか?この記事では、HTML で ul リストを水平方向に配置する 2 つの方法を紹介します。困っている友達は参考にしていただければ幸いです。 UL リストの水平配置はナビゲーションでよく使用されます。次に、水平ナビゲーションの例を使用して、CSS を使用して ul を水平に配置する方法について説明します。

注:

1. デフォルトでは、li リストの前に小さなドットが表示されますが、見た目を美しくするために、余分な小さなドットを削除する必要がある場合があります。 CSS で list- 属性を使用すると、もちろんリストの前に画像を追加できます。
2 ページをより魅力的にするために、通常、疑似クラス要素がナビゲーションで使用されます。最も一般的なのは、ページの背景色、フォント サイズ、画像などを変更できるホバーです。マウスがその上を通過するとナビゲーションが行われます。
3. CSS の表示属性を上手に使いましょう。 li に高さと幅を持たせ、メニュー コンテンツの位置を調整する必要がある場合は、それをブロック レベルの要素に変換した後、padding や text-align などの属性を使用して、display 属性値を block に設定する必要があります。効果。

1. display:inline は ul

の水平配置を実現します。ul li を使用して水平方向のナビゲーションを作成し、マウスが通過すると背景色が変わります。 。コードは次のとおりです。
HTML 部分:

<ul id="nav">
		<li><a href="#">首页</a></li>
		<li><a href="#">课程介绍</a></li>
		<li><a href="#">师资力量</a></li>
		<li><a href="#">新闻动态</a></li>
		<li><a href="#">联系我们</a></li>	
	</ul>

CSS 部分:

<style type="text/css">			
	#nav {
	        margin: 50px auto;
	        height: 40px;
	         background-color: #690;
	      }			
	#nav ul {
		list-style: none;
		margin-left: 50px;
		}			
	#nav li {
		display: inline;			    
		}			
	#nav a {
		line-height: 40px;
		color: #fff;
		text-decoration: none;
		padding: 20px 20px;
		}			
	#nav a:hover {
		background-color: #060;
		}
</style>

レンダリング:






マウス通過の効果:



2. float: 左に ul

の水平配置を実現します。 float: left は ul の水平配置を実現します。li がフローティングになった後、親要素が特定のスタイルを持ち、固定された幅と高さを持たない場合は、クリアする必要があります。親要素の浮動小数点を指定するか、固定の幅と高さを設定します。 HTML 部分は上記と同じで、CSS 部分は次のとおりです。

<style type="text/css">
	#nav {
		height: 40px;
		margin-top: 50px;
		background-color: #690;
		}			
	#nav ul {
		list-style: none;			    
		margin-left: 50px;
		}			
	#nav li {
		display: block;
		float: left;
		}			
	#nav a {
		line-height: 40px;
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 0 20px;
		}			
	#nav a:hover {
		background-color: #060;
		}
</style>

効果は上記と同じですが、方法が異なります。
要約: float:left と display:inline の両方で ul li の水平配置を実現できます。具体的な方法の選択は、個人の習慣とプロジェクトのニーズに応じて異なります。あなた。

以上がul の li 要素を水平方向に配置する方法についての詳細な図解説明 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。