如何在 HTML 和 CSS 中创建水平导航栏？

在本文中，我们将尝试创建一个水平导航栏。要理解这篇文章，我们需要了解一些 HTML 和 CSS 的基础知识。

方法：

• 我们将创建导航栏的结构，稍后将水平显示。
• 我们将为此使用的标签是
  标签和

  标签。在这里，导航标签将充当用于导航的项目列表的容器。 Ul 还将用于列出用户将导航的项目数。
  • 现在我们有了导航栏的结构。因此，我们将应用 flex 等 CSS 属性来使导航栏水平显示。

  例子：

  HTML

  
  
      
          
      
      
          
          
          
  
              
              
  
                  
  Car
                  
  file
              
              
              
  
            
                  
                  Search
              
          
      
  

  代码的输出：

  

  现在我们有了表的结构。所以我们将设计导航栏，我们将使用像 flex 这样的属性使导航栏呈现水平。  

  CSS

  * {
  /* Here we set the margin and padding  0 */
    margin: 0; 
    
      padding: 0;
  }
    
  .navbar {
      display: flex;
    
  /* This is used to make the navbar sticky, So that the
      navbar stays at the top part even if we scroll */
      position: sticky; 
      align-items: center;
      justify-content: center;
      top: 0px;
    
  /*it specifies the mouse cursor to be displayed
      when it is pointed over the element */
      cursor: pointer;
  }
    
  .nav-list {
      width: 50%;
      display: flex;
  }
    
  .nav-list li {
      list-style: none;
      padding: 26px 30px;
  }
    
  .nav-list li a {
      text-decoration: none;
      color: white;
  }
    
  .nav-list li a:hover {
      color: black;
  }
    
  .rightNav {
      width: 50%;
      text-align: right;
  }
    
  #search {
      padding: 5px;
      font-size: 17px;
      border: 2px solid grey;
      border-radius: 9px;
  }
    
  .background {
      background: rgba(0, 0, 0, 0.4) url(
  "https://media.geeksforgeeks.org/wp-content/uploads/20201215124609/Capture-300x14.PNG");
      background-blend-mode: darken;
      background-size: cover;
  }
  

  最终代码：这是以上所有代码的组合——

  HTML

  
  
      
          
        
      
      
          
          
          
  
              
              
  
                  
  Car
                  
  file
              
              
              
  
            
                  
                  Search
              
          
      
  
  

  输出：