【问题标题】：CSS Align Span to right of list?CSS将跨度对齐到列表的右侧？
【发布时间】：2016-03-04 02:59:24
【问题描述】：

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 没有任何作用

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

【问题讨论】：

How to right-align form input boxes?的可能重复

标签： css

【解决方案1】：

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

您可以在此处更改十字/勾号与文本之间的间距。

li{
    position:relative;
    width:600px;
}
.cross, .tick {
    position:absolute;
    right:0px;
}

JSFidle

【讨论】：

【解决方案2】：

使用浮动而不是文本对齐

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

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

【讨论】：

【解决方案3】：

对于 flexbox 方法。

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

<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>

【讨论】：

【解决方案4】：

text-align 用于对齐其父元素中的内容，因此，在这种情况下，它会尝试将刻度线和十字线对齐到跨度的右侧，因为它们是内联元素，并且只会与它们的宽度一样宽内容，不会产生视觉变化。

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>

【讨论】：

【解决方案5】：

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

【讨论】：