如何在同一行中水平对齐2个跨度？

Question

我在同一行中有2个跨度，每个跨度中有几个元素。

如何在我的2个跨度中添加css样式并使其中一个居中，同一行中的另一个不应移动前一个（居中），但它应绑定到其右上角。

HTML

    <span><!-- should be centered--> 
      <a id="3"></a><span id="2"> ..... </span> 
      <a id="1">...</a>
    </span>

    <span><!-- left corner of this span should meet the right corner of the previous span -->
      <label>something</label><input type="text" id="5">
      <input type="button" />
    </span>

    <span class="mrRight"><!-- float right here --> ...... </span> 

Answer 1

首先要实现这一点，你需要在跨度上添加一个包装器，如此

<强> HTML

<div class="span_wrapper">
  <span> 
    <a id="3"></a><span id="2"> center </span> 
    <a id="1">center</a>
  </span>

  <span>
    <label>something</label>
    <input type="text" id="5"> <input type="button" />
  </span>

  <span class="mrRight"> right </span> 
</div>

现在适当的 CSS 应该是

.span_wrapper {
  text-align: center;
}

.span_wrapper .mrRight{
  float: right;
}

.span_wrapper {
  text-align: center;
}

.span_wrapper .mrRight{
  float: right;
}

<div class="span_wrapper">
  <span> 
    <a id="3"></a><span id="2"> center </span> 
    <a id="1">center</a>
  </span>

  <span>
    <label>something</label>
    <input type="text" id="5"> <input type="button" />
  </span>

  <span class="mrRight"> right </span> 
</div>

Answer 2

您需要将第一个跨度margin-left设置为48％。或者如果你想要精确，margin-left：calc（50％ - x），其中x是第一个span的宽度的一半。

fiddle

注意：渐变只是为了显示中心的位置：）

.center { margin-left: calc(50% - 26px) }