如何使用 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+ 浏览量

启动你的 职业生涯

通过完成课程获得认证

立即开始
广告