📜  如何使用 HTML 和 CSS 创建右对齐菜单链接?

📅  最后修改于: 2021-10-29 03:42:19             🧑  作者: Mango

许多网站都使用右对齐菜单链接。就像酒店网站一样,菜单部分包含很多选项,但在紧急情况下与他们联系需要特别注意。在这种情况下,您可以将所有菜单选项放在导航栏的左侧,并在栏的右侧显示联系我们选项。这种设计将使网站比常规菜单链接更具吸引力。要创建正确的对齐菜单链接,您只需要 HTML 和 CSS。菜单链接应包含您希望在右侧显示的重要菜单列表。下面的例子将说明这个概念的方法。

创建结构:在本节中,我们将创建一个基本的网站结构来创建一个右对齐的菜单链接。

  • 用于制作结构的 HTML 代码:
    
    
      
    
        
            How To Create Right Aligned Menu
            Links using HTML and CSS ?
        
          
        
    
      
    
          
        
        
      
        
        
            

                GeeksforGeeks         

                   A Computer Science Portal for Geeks                    

                How many times were you frustrated while             looking out for a good collection of             programming/algorithm/interview questions?             What did you expect and what did you get?             This portal has been created to provide             well written, well thought and well             explained solutions for selected questions.         

        
      

设计结构:在上一节中,我们已经创建了基本网站的结构。在本节中,我们将设计导航栏的结构。

  • 结构的CSS代码:
    
    

结合 HTML 和 CSS 代码:这是结合以上两部分后的最终代码。您可以看到 Home、Careers 和 Our Products 默认左对齐,而 About us 和 Contact us 右对齐。



  

    
        How To Create Right Aligned Menu
        Links using HTML and CSS ?
    
      
    
          
    

  

      
    
    
  
    
    
        

            GeeksforGeeks         

               A Computer Science Portal for Geeks                    

            How many times were you frustrated while             looking out for a good collection of             programming/algorithm/interview questions?             What did you expect and what did you get?             This portal has been created to provide             well written, well thought and well             explained solutions for selected questions.         

    
  

输出: