css - 具有 2 个跨度的 Div，居中 1，右对齐其他，但保持第一个居中

Question

我有一个包含 2 个 span 的 div。我想让第一个跨度相对于 div 居中，并使第二个跨度右对齐(我正在使用 Bootstrap 中的右拉)。

在下面的 JSBin 中，您将看到我所追求的。我希望 Div1 中的“Hello”跨度与 Div2 中的位置相同。换句话说，我想将第一个跨度相对于父跨度居中，并且不受 div 中任何其他跨度的影响...

这是我的 jsbin:http://jsbin.com/cixun/1/

Answer 1

一个选择是相对于 div 绝对定位正确的 span:

http://jsbin.com/wuged/1/edit

.row{
  position: relative;
}

.right{
  position: absolute;
  right: 0;
}

<div class="row black center" >
   <span class="first">Hello</span>

   <span class="right">more text on the right</span>
</div>