程序员可以通过下面提到的两种方法将图像添加到每个项目的下拉列表中。
方法一:使用 CSS .dropdown类使用position:relative;当用户需要在下拉按钮下设置内容时使用(使用position: absolute 完成)。
.dropdown-content类保存实际的下拉内容。请注意,“最小宽度”是 160 像素。程序员可以根据需要进行设置。在下拉内容中添加标签以将图像插入到每个项目的下拉列表中。
注意:如果用户需要内容的宽度与下拉按钮一样宽,请将宽度设置为 100%(设置溢出:自动以在小屏幕上滚动)。我们没有使用边框,而是使用 CSS box-shadow属性来创建像“卡片”一样的下拉菜单。 :hover选择器用于在用户将鼠标移到下拉按钮上时显示下拉菜单。
例子:
输出:
在上面的示例中,您需要将鼠标指针“悬停”在按钮上以查看下拉列表。
方法 2:使用 Bootstrap:可以从 或组件实现下拉菜单。为了显示记录或列表,使用 Bootstrap 下拉插件切换上下文覆盖。
例子:
HTML
GeeksforGeeks
输出:
在上面的示例中,您可以切换(单击打开和关闭)按钮以查看下拉列表。
注意:在上面的示例中,您可以使用