CSS Align Span到列表右侧？

Question

HTML

<ul class="list-group">
    <li class="list-group-item normal-row">TEST TEXT <span class="cross">✘</span></li>
    <li class="list-group-item normal-row">TEST TEXT <span class="rtr_symbolcross"><span class="tick">✔</span></li>
    <li class="list-group-item normal-row">TEST TEXT TEST TEXT TEST TEXT<span class="cross">✘</span></li>
    <li class="list-group-item normal-row">TEST TEXT TEST TEXT<span class="tick">✔</span></li>
</ul>

CSS

.tick {
    text-align: right;
}
.cross {
    text-align: right;
}

https://jsfiddle.net/ewgp3oxL/

如何制作上述内容，如下所示：

所以你可以看到右边的蜱虫和十字架一直都在，我尝试过的css没有做任何事情：S

我正在使用跨度，因为我还应用颜色，背景颜色，字体大小，字体粗细，阴影......以及其他一些东西。

Answer 1

使用float而不是text-align

.tick {
    float: right;
    clear: both;
}
.cross {
    float: right;
    clear: both;
}

工作小提琴 - https://jsfiddle.net/1xmxncLr/

Answer 2

将跨度位置更改为绝对值，将右侧更改为0px。

在这里，您可以更改交叉/刻度和文本之间的空间。

include

JSFidle

Answer 3

对于flexbox方法。

＆＃13;

＆＃13;

li {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<ul class="list-group">
  <li class="list-group-item normal-row">TEST TEXT <span class="cross">✘</span>
  </li>
  <li class="list-group-item normal-row">TEST TEXT <span class="rtr_symbolcross"><span class="tick">✔</span>
  </li>
  <li class="list-group-item normal-row">TEST TEXT TEST TEXT TEST TEXT<span class="cross">✘</span>
  </li>
  <li class="list-group-item normal-row">TEST TEXT TEST TEXT<span class="tick">✔</span>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

abstract/non-strict用于对齐其父级内容，因此，在这种情况下，它会尝试对齐标记＆amp;跨越到跨度的右侧，因为它们是内联元素，并且只会与其内容一样宽，不会产生视觉变化。

Flexbox本来是我的首选解决方案，但正如Paulie_D已经涵盖的那样，我将提供一种使用绝对定位的替代方案：

li{
  position:relative;
}
span{
  position:absolute;
  right:0;
  top:0;
}

<ul>
  <li>TEST TEXT <span>✘</span></li>
  <li>TEST TEXT <span>✔</span></li>
  <li>TEST TEXT TEST TEXT TEST TEXT<span>✘</span></li>
  <li>TEST TEXT TEST TEXT<span>✔</span></li>
</ul>

Answer 5

您还可以将列表转换为表格，并将表格分布在页面或容器中，并使用勾选或设置td与text-align: right元素交叉

Answer 6

不是将它们对齐，而是将它们定位为固定，然后向右移动：

.tick {
    position: fixed;
    right: 0; }
.cross {
    position: fixed;
    right: 0; }