当锚标记内的文本变长时，跨度标记向下移动答案

【问题标题】：span tag shifting down when text inside anchor tag becomes long当锚标记内的文本变长时，跨度标记向下移动
【发布时间】：2020-09-21 07:13:13
【问题描述】：

我正在使用flask开发一个网络应用程序。在pic所示的下拉区域中

当文本变得太长时，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;
}`

有没有什么方法可以让关闭图标始终放在末尾，不管文本有多长？谢谢。

【问题讨论】：

如果我们不能直接测试，就很难看出确切的问题。您能否在代码 sn-p 或 codepen.io/pen 中提供一个示例来演示该问题？

标签： javascript html css flask

【解决方案1】：

您需要将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%);
}

【讨论】：

【解决方案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>

【讨论】：