javascript - 当锚标记内的文本变长时,跨度标记向下移动
问题描述
我正在使用烧瓶开发一个网络应用程序。在图片中显示的下拉区域中
当文本变得太长时,跨度标记内的关闭按钮会向下移动。以下是我的 html 和 css 代码,
<li class="dropdown">
<button class="dropbtn" onclick="myFunction()">Load map <i class="fa fa-caret-down"></i></button>
<div id="hahaha" class="dropdown-content">
{% for maps in map %}
<a href="#">{{maps[1]}}<span class="close">×</span></a>
{% endfor %}
</div>
</li>
`.dropbtn {
background-color: #f8f9fa;
color: white;
padding: 16px;
font-size: 16px;
color:#6f7477 ;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.close {
padding: 0px 6px 0px 6px;
float: right;
cursor: pointer;
}
.close:hover{
background-color: #f44336;
color: white;
}`
无论文本有多长,有什么方法可以始终将关闭图标放在末尾?谢谢。
解决方案
您需要将close
按钮放在绝对位置并更新a
与之相关的标签样式。这会有所帮助。
.dropdown-content a {
...
position: relative;
padding-right: 37px; /* 16px + 21px (close button width) You can put the reasonable value here. */
}
.close {
padding: 0px 6px 0px 6px;
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
}
推荐阅读
- excel - Excel 公式,用于查找 16 日是否在周六或周日,如果是,则返回下周一的日期
- c++ - C++ 不需要的舍入
- php - Opencart 3.0 循环获取类别 ID 的产品
- r - 用 Magick 制作的 R Gif 动态注释文本
- java - 调用 driver.quit() 和 driver.close() 时 Singleton 类如何控制?
- javascript - 从 API 将 Unix 时间戳转换为可读时间
- oracle-apex - 如何隐藏水平滚动条
- sql - Oracle SQL - 如何在另一个查询中选择子字符串索引?
- ansible - 如何将多行作为值传递给 Ansible
- tableau-api - Tableau - 作用于两个日期列的日期筛选器