Css 如何自动调整下拉内容的宽度以匹配<；p>；元素？

基本上，我有两个

元素。当您将鼠标悬停在一个

元素上时，将显示下拉内容。问题是，我希望下拉列表内容（下拉列表本身）的宽度与

元素的宽度匹配。我在第一张图片上画的红线是我想“剪掉”或调整大小的，因此它完全适合文本

代码如下：

#下拉列表{
显示：内联块；
位置：相对位置；
文本对齐：居中；
}
#下拉列表p{
颜色：#262261；
字体系列：“无衬线工作”，无衬线；
字体大小：35px；
字母间距：5px；
保证金：自动；
}
#下拉内容{
位置：绝对位置；
保证金：10px自动；
高度：自动；
最小宽度：300px；
不透明度：0；
过渡：所有。2放松；
背景色：#262261；
边界半径：8px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.导航下拉框{
宽度：400px；
}
#下拉内容{
字体大小：20px；
字体系列：“无衬线工作”，无衬线；
字体大小：30px；
字母间距：2px；
过渡：0.5s；
}
#下拉菜单：悬停#下拉菜单内容{
不透明度：1；
线高：2；
垫面：1米；
垫底：1米；
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
-o型过渡：所有0.5s缓进缓出；
过渡：所有0.5s缓进缓出；
}
#下拉链接：链接{
颜色：#FFFFFF；
显示：块；
文字装饰：无；
}

应用程序

只需使用

左：0；右：0position:absolute

元素编码>并删除所有宽度定义。

内联块将使宽度适合内容：



#下拉列表{
显示：内联块；
位置：相对位置；
文本对齐：居中；
}
#下拉列表p{
颜色：#262261；
字体系列：“无衬线工作”，无衬线；
字体大小：35px；
字母间距：5px；
保证金：自动；
}
#下拉内容{
位置：绝对位置；
左：0；
右：0；
保证金：10px自动；
文本对齐：居中；
不透明度：0；
过渡：所有。2放松；
背景色：#262261；
边界半径：8px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
#下拉内容{
字体大小：20px；
字体系列：“无衬线工作”，无衬线；
字体大小：30px；
字母间距：2px；
过渡：0.5s；
}
#下拉菜单：悬停#下拉菜单内容{
不透明度：1；
线高：2；
垫面：1米；
垫底：1米；
过渡：所有0.5s缓进缓出；
}
#下拉链接：链接{
颜色：#FFFFFF；
显示：块；
文字装饰：无；
}

应用程序



延伸