如何使用 CSS 建立具有左對齊和右對齊連結的導航欄？

要使用 CSS 建立一個具有左對齊和右對齊連結的導航欄，使用者應該對 CSS 彈性盒佈局 有基本的瞭解。首先，我們將使用 HTML 建立包含五個連結的導航欄結構，然後我們將使用 CSS 設計導航欄並將連結對齊到導航欄的左側和右側，並應用彈性盒佈局屬性以確保連結的正確定位。

我們有一個包含五個連結的導航選單，我們的任務是使用 CSS 建立一個具有左對齊和右對齊連結的導航欄。在本文中，我們將實施以下步驟來使用 CSS 建立具有左對齊和右對齊連結的導航欄

使用 HTML 建立導航選單結構

  • 我們使用了 nav 標籤來定義一個包含所有連結集的導航欄。
  • 然後，我們使用了兩個 div 元素來包裝使用 錨 標籤建立的連結，將其放在兩個容器中，以便在導航欄中分別位於左側和右側。

以下是上述步驟的 HTML 實現

<body>
	<nav>
		<div class="left-links">
			<a class="links selected" href="/index.htm" 
			   target="_blank">Home</a>
			<a class="links" href="/market/login.jsp" 
			   target="_blank"> Login</a>
			<a class="links" href="/market/index.asp" 
			   target="_blank"> Courses</a>
		</div>
		<div class="right-links">
			<a class="links" href="/about/contact_us.htm" 
			   target="_blank"> Contact Us</a>
			<a class="links" href="/latest/certifications" 
			   target="_blank">Certification</a>
		</div>
	</nav>
	<h3>
	    To create a navigation bar with left-aligned and 
		right-aligned links with CSS
	</h3>
	<p>Click on the above links to explore our website 
		<span>TutorialsPoint</span>.
	</p>
</body>
  • 我們使用了 nav 類來設計導航欄。我們使用了 display 屬性來應用彈性盒佈局，使用 CSS position 和 top 屬性將導航欄固定在頂部。
  • 然後，我們使用 CSS width 設定了尺寸，使導航欄使用整個寬度，並使用 background-color 和 color 屬性設定導航欄的外觀。
  • 在下一步中，我們使用了 left-links 類來設定 flex-grow、flex-shrink 和 flex-basis 屬性，使用 flex 簡寫表示法。這將“主頁”、“登入”和“註冊”連結設定為左側，其中左側彈性專案的初始長度設定為 200px。
  • 然後，我們為 links 類中的所有連結應用了樣式，其中我們設定了其 font-family、font-size，應用了 padding，使用 text-decoration 去除了連結的下劃線，並使用 text-align 屬性居中對齊。
  • 最後，我們設定了懸停時連結的顏色和 span 標籤的文字顏色。

以下是上述步驟的 CSS 實現

body {
	margin: 0px;
	 margin-top:60px;
}
nav {
	display: flex;
	position: fixed;
	top: 0;
	width: 100%;
	background-color: #031926;
	color: white;
	overflow: auto;
	height: auto;
}
.left-links {
	flex: 1 1 200px;
}
.links {
	font-family: Verdana, sans-serif;
	display: inline-block;
	text-align: center;
	padding: 14px;
	color: white;
	text-decoration: none;
	font-size: 15px;
}
.links:hover {
	background-color: #04af2f;
}
span {
	color: #04af2f;
}

完整示例程式碼

以下是使用 CSS 建立具有左對齊和右對齊連結的導航欄的完整示例程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>
	<style>
		body {
			margin: 0px;
         	margin-top:60px;
		}
		nav {
			display: flex;
			position: fixed;
			top: 0;
			width: 100%;
			background-color: #031926;
			color: white;
			overflow: auto;
			height: auto;
		}
		.left-links {
			flex: 1 1 200px;
		}
		.links {
			font-family: Verdana, sans-serif;
			display: inline-block;
			text-align: center;
			padding: 14px;
			color: white;
			text-decoration: none;
			font-size: 15px;
		}
		.links:hover {
			background-color: #04af2f;
		}
		span {
			color: #04af2f;
		}
	</style>
</head>
<body>
	<nav>
		<div class="left-links">
			<a class="links selected" href="/index.htm" 
			   target="_blank">Home</a>
			<a class="links" href="/market/login.jsp" 
			   target="_blank"> Login</a>
			<a class="links" href="/market/index.asp" 
			   target="_blank"> Courses</a>
		</div>
		<div class="right-links">
			<a class="links" href="/about/contact_us.htm" 
			   target="_blank"> Contact Us</a>
			<a class="links" href="/latest/certifications" 
			   target="_blank">Certification</a>
		</div>
	</nav>
	<h3>
	    To create a navigation bar with left-aligned and 
		right-aligned links with CSS
	</h3>
	<p>Click on the above links to explore our website 
		<span>TutorialsPoint</span>.
	</p>
</body>
</html>

結論

在本文中，我們學習並瞭解瞭如何使用 CSS 建立具有左對齊和右對齊連結的導航欄。我們使用 HTML 使用 nav、div 和 anchor 標籤建立導航欄的結構，並應用 CSS 彈性盒佈局 屬性來實現連結的左右對齊。彈性盒佈局使設計具有響應性。

更新於：2024年9月5日

11K+ 瀏覽量

啟動你的 職業生涯

透過完成課程獲得認證

立即開始
廣告