当锚标记内的文本变长时，span 标记向下移动

Question

我正在使用 flask 开发一个 web 应用程序。在图片所示的下拉区域中

当文本变得太长时，span 标签内的关闭按钮会向下移动。以下是我的 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">&times</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;
}`

有没有办法不管文本多长，总是把关闭图标放在最后？谢谢。

Answer 1

您需要将close按钮放在绝对值 position 中，并更新与之相关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%);
}

Answer 2

这必须解决您的问题！

 ul {border:1px solid #9a9a9a;display:inline-block;padding:0;} ul li {background:#eaeaea;width:120px;position:relative;list-style:none;} ul li.item {overflow:hidden;width:80px;display:inline-block;text-overflow: ellipsis;} ul li.close {position:absolute;right:0px;}

 <ul> <li> <span class="item">red</span><span class="close">X</span> </li> <li> <span class="item">green</span><span class="close">X</span> </li> <li> <span class="item">blue</span><span class="close">X</span> </li> <li> <span class="item">sdfsdfewfdsfxvxdcxvxcsdfsdfsdfdsf</span><span class="close">X</span> </li> </ul>