📌  相关文章
📜  如何将图像添加到每个项目的下拉列表中?

📅  最后修改于: 2021-11-07 08:36:30             🧑  作者: Mango

程序员可以通过下面提到的两种方法将图像添加到每个项目的下拉列表中。

方法一:使用 CSS .dropdown类使用position:relative;当用户需要在下拉按钮下设置内容时使用(使用position: absolute 完成)。

.dropdown-content类保存实际的下拉内容。请注意,“最小宽度”是 160 像素。程序员可以根据需要进行设置。在下拉内容中添加标签以将图像插入到每个项目的下拉列表中。

注意:如果用户需要内容的宽度与下拉按钮一样宽,请将宽度设置为 100%(设置溢出:自动以在小屏幕上滚动)。我们没有使用边框,而是使用 CSS box-shadow属性来创建像“卡片”一样的下拉菜单。 :hover选择器用于在用户将鼠标移到下拉按钮上时显示下拉菜单。

例子:

HTML


  

    Adding image to dropdown list
    

  

    
        

            GeeksforGeeks         

                        
  


HTML


  

    
    
    
  
    
    
  
    
    
    
      
    
      
    

  

    
        

            GeeksforGeeks         

                        
  


输出:

在上面的示例中,您需要将鼠标指针“悬停”在按钮上以查看下拉列表。

方法 2:使用 Bootstrap:可以从                

        
       

输出:

在上面的示例中,您可以切换(单击打开和关闭)按钮以查看下拉列表。

注意:在上面的示例中,您可以使用

标签代替