Html 将下拉列表中的文本框向左对齐css

需要帮助才能在曲目的左侧显示文本框。这就是它应该看起来的样子

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#94CB32；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：10；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

---

这很简单，使用

display:flex

显示内容

检查更新的代码段

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#94CB32；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：10；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
.下拉：悬停.下拉内容{
显示器：flex；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

---

这很简单，使用

display:flex

显示内容

检查更新的代码段

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#94CB32；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：10；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
.下拉：悬停.下拉内容{
显示器：flex；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

---

将以下内容添加到

。下拉列表内容

：

top: 0;
right: calc( 100% + 5px );

注意当您将一个元素悬停以显示另一个元素时，必须小心放置。如果父元素和子元素之间存在间隙，则不再悬停父元素，子元素将消失。要解决这个问题，需要两个元素相互接触。您可以通过确保它们相互接触（对接或重叠）、添加填充（如果使用背景色可能不理想）或使用伪元素来实现这一点。我选择了后者，因此添加了此选择器：

.dropdown-content:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  top: 0;
  right: -5px;
  bottom: 0;
}

此解决方案与您在图像中显示的一样，但我不确定您希望（将要）如何处理

下拉列表左侧的空间。我缩小了
主体的宽度
，以便您可以看到它飞出


正文{
宽度：40%；
保证金：25像素自动；
}
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*填充轨迹和弹出按钮之间的间隙，以便在移动鼠标时继续显示*/
.下拉列表内容：之前{
内容：''；
显示：块；
位置：绝对位置；
宽度：5px；
排名：0；
右：-5px；
底部：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
排名：0；
右：计算（100%+5px）；
背景色：#94CB32；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：10；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}
将以下内容添加到
。下拉列表内容
：

top: 0;
right: calc( 100% + 5px );

注意当您将一个元素悬停以显示另一个元素时，必须小心放置。如果父元素和子元素之间存在间隙，则不再悬停父元素，子元素将消失。要解决这个问题，需要两个元素相互接触。您可以通过确保它们相互接触（对接或重叠）、添加填充（如果使用背景色可能不理想）或使用伪元素来实现这一点。我选择了后者，因此添加了此选择器：

.dropdown-content:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  top: 0;
  right: -5px;
  bottom: 0;
}

此解决方案与您在图像中显示的一样，但我不确定您希望（将要）如何处理
下拉列表左侧的空间。我缩小了
主体的宽度
，以便您可以看到它飞出


正文{
宽度：40%；
保证金：25像素自动；
}
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*填充轨迹和弹出按钮之间的间隙，以便在移动鼠标时继续显示*/
.下拉列表内容：之前{
内容：''；
显示：块；
位置：绝对位置；
宽度：5px；
排名：0；
右：-5px；
底部：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
排名：0；
右：计算（100%+5px）；
背景色：#94CB32；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：10；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
滴