如何使用CSS创建具有左对齐和右对齐链接的导航栏？

原创

SEO-juper

发布于 2023-12-08 19:38:34

1730

发布于 2023-12-08 19:38:34

文章被收录于专栏：文章分享文章分享

使用 CSS，我们可以轻松创建导航栏，即菜单。此外，链接可以左对齐或右对齐。我们将使用 flex 来实现相同的目的。让我们看看如何。

使用 <nav> 创建导航栏

<nav> 元素用于在网页上创建导航栏。链接设置在以下两者之间：

<nav>
   <! --  set the div for links  -->
</nav>

导航栏，弯曲和位置固定

显示屏设置为弯曲。使用position属性的固定值固定位置：

nav {
   display: flex;
   position: fixed;
   top:0;
   width: 100%;
   background-color: rgb(251, 255, 196);
   overflow: auto;
   height: auto;
}

设置 Left Links 的 div

以下菜单链接位于网页的左侧：

<div class="left-links">
   <a class="links selected" href="#">Home</a>
   <a class="links" href="#"> Login</a>
   <a class="links" href="#"> Register</a>
</div>

为正确的链接设置 div

以下菜单链接位于网页的右侧：

<div class="right-links">
   <a class="links" href="#"> Contact Us</a>
   <a class="links" href="#">More Info</a>
</div>

链接与 Flex 向左对齐

使用 flex 属性，将 Home、Login 和 Register 链接设置在左侧。左侧柔性项的初始长度设置为 200px：

.left-links{
   flex:1 1 200px;
}

以下是创建具有左对齐和右对齐链接的导航栏的代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <style>
      body{
         margin:0px;
         margin-top:60px;
         padding: 0px;
      }
      nav{
         display: flex;
	      position: fixed;
         top:0;
         width: 100%;
         background-color: rgb(251, 255, 196);
         overflow: auto;
         height: auto;
      }
         .left-links{
         flex:1 1 200px;
      }
      .links {
         display: inline-block;
         text-align: center;
         padding: 14px;
         color: rgb(0, 0, 0);
         text-decoration: none;
         font-size: 17px;
         font-weight: bolder;
      }
      .links:hover {
         border-bottom: 2px solid purple;
      }
      .selected{
         border-bottom: 2px solid purple;
      }
   </style>
</head>
<body>
   <nav>
      <div class="left-links">
         <a class="links selected" href="#">Home</a>
         <a class="links" href="#"> Login</a>
         <a class="links" href="#"> Register</a>
      </div>
      <div class="right-links">
         <a class="links" href="#"> Contact Us</a>
         <a class="links" href="#">More Info</a>
      </div>
   </nav>
   <h1>Hover on the above links</h1>
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css