我正在尝试创建一个自定义下拉菜单,并希望将下拉菜单居中放置触发它的文本。
这是我的HTML。
<div class="dropdown-container">
<span>del</span>
<div class="dropdown">
<span class="fas fa-sort-up fa-lg dropdown-arrow">^</span>
<div class="dropdown-options">
<div class="dropdown-item">Are you sure?</div>
<div class="dropdown-item">Yes</div>
<div class="dropdown-item">No</div>
</div>
</div>
</div>
这是我的CSS:
.dropdown-container{
position: relative;
}
.dropdown {
position: absolute;
border: 1px solid black;
z-index: 1;
margin-top: 7px;
background-color: white;
width: max-content;
}
.dropdown-arrow {
position: absolute;
right: 50%;
top: -5px;
}
我无法将dropdown
的div居中放在<span>del</span>
的中心。如果我尝试使用px居中,则span标签包含长度不同的单词时,它会偏移。例如:“删除”。