我怎样才能使跨度在li下的位置固定?

Question

房间1旁边的箭头图标是一个span。这个箭头图标的代码是

<span class="showActionMenu"></span>

该span位于"li"标签下。问题是你可以看到的文本"1-02-Sudhansu PromptPackage"这次不是太大。所以它旁边的箭头图标是在正确的位置。但是，如果我增加文本大小，那么箭头图标向下移动，因为我使用的"跨度"就在代码中的文本之后。我希望这个箭头图标应该总是在那个地方，意思是文本的最右边。无论文本有多长，箭头图标不应该相对于文本的大小。如有任何帮助，不胜感激

Answer 1

您可以使用position将span放置在其父span的右侧:

li {
  width: 180px;
  position: relative;
  padding-right: 20px;
}
span.showActionMenu {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: red;
}

<li>This is my text <span class="showActionMenu"></span></li>