基本上,我有两个 <p>
元素。当您将鼠标悬停在一个 <p>
上时元素,出现下拉内容。问题是,我希望下拉列表内容(下拉列表本身)的宽度匹配 <p>
的宽度元素。 These images should probably describe what I'm talking about .我在第一张图片上画的红线是我想“切断”或调整大小以使其完全适合文本的内容。
代码如下:
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
color: #262261;
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
height: auto;
min-width: 300px;
opacity: 0;
transition: all .2s ease-in;
background-color: #262261;
border-radius: 8px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.nav-dropdown-container {
width: 400px;
}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
transition: 0.5s;
}
#dropdown:hover #dropdown-content {
opacity: 1;
line-height: 2;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#dropdown-link:link {
color: #FFFFFF;
display: block;
text-decoration: none;
}
<div id="applications">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>APPLICATIONS</p>
<div id="dropdown-content">
<center>
<p><a id="dropdown-link" href="pages/nami.html">abc</a></p>
<p><a id="dropdown-link" href="pages/jammr.html">def</a></p>
</center>
</div>
</div>
</div>
我真的不想手动执行此操作,我希望自动完成此操作。请让我知道这是否可能。再一次,我很难解释我想做什么,所以我尽力了。谢谢!
最佳答案
只需将 left:0;right:0;
与 positon:absolute
元素一起使用,并删除所有宽度定义。 inline-block
将使宽度适合内容:
And get rid of the center tag.
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
color: #262261;
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
left: 0;
right: 0;
margin: 10px auto auto;
text-align: center;
opacity: 0;
transition: all .2s ease-in;
background-color: #262261;
border-radius: 8px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
transition: 0.5s;
}
#dropdown:hover #dropdown-content {
opacity: 1;
line-height: 2;
padding-top: 1em;
padding-bottom: 1em;
transition: all 0.5s ease-in-out;
}
#dropdown-link:link {
color: #FFFFFF;
display: block;
text-decoration: none;
}
<div id="dropdown">
<p>APPLICATIONS</p>
<div id="dropdown-content">
<p><a id="dropdown-link" href="pages/nami.html">abc</a></p>
<p><a id="dropdown-link" href="pages/jammr.html">def</a></p>
</div>
</div>
<div id="dropdown">
<p>extention</p>
<div id="dropdown-content">
<p><a id="dropdown-link" href="pages/nami.html">abc</a></p>
<p><a id="dropdown-link" href="pages/jammr.html">def</a></p>
</div>
</div>
关于css - 如何自动调整下拉内容的宽度以匹配 <p> 元素的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53751972/