html - 在特定字符上对齐文本

Question

我有这个要在中心对齐的单词列表，每个列表项都由两个单词组成，中间用“-”(连字符)分隔。有没有一种简单的方法可以对齐连字符上的点？现在当单词长度不同时，连字符不再位于中间。

我做了一个 fiddle 来让我的问题更清楚: http://jsfiddle.net/seLvC/

我当前的代码:

.progress-ww {
  font-size: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

<section>
  <div class="progress-ww">
    <div>
      <div>lopen - ik loop</div>
      <div>klimmen - ik klim</div>
      <div>geven - ik geef</div>
      <div>schreeuwen - ik schreeuw</div>
      <div>blozen - ik bloos</div>
    </div>
  </div>
</section>

Answer 1

实现此目的的一种方法是将 spans 放在连字符左右两侧的单词周围。然后你可以给这些添加一个最小宽度，使它们的宽度相等，这会将连字符放在中间。

Fiddle

.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;


}
.progress-ww span {
    display:inline-block;
    width:100px;
    text-align:left;
}
.progress-ww span:first-of-type {
    text-align:right
}

<section>
    <div class="progress-ww">
        <div>
            <div><span>lopen</span> - <span>ik loop</span></div>
            <div><span>klimmen</span> - <span>ik klim</span></div>
            <div><span>geven</span> - <span>ik geef</span></div>
            <div><span>schreeuwen</span> - <span>ik schreeuw</span></div>
            <div><span>blozen</span> - <span>ik bloos</span></div>
        </div>
    </div>
</section>

---

使用 FLEX 的更新版本

以下是此解决方案使用 flex 的更新版本。此解决方案意味着您不必在跨度上设置任何固定宽度。

.progress-ww div {
  display: flex;
}

.progress-ww div span {
  flex: 1;
}

.progress-ww div span:first-of-type {
  text-align: right;
  padding-right: 5px;
}

.progress-ww div span:last-of-type {
  padding-left: 5px;
}

<section>
  <div class="progress-ww">
    <div><span>lopen</span> - <span>ik loop</span></div>
    <div><span>klimmen</span> - <span>ik klim</span></div>
    <div><span>geven</span> - <span>ik geef</span></div>
    <div><span>schreeuwen</span> - <span>ik schreeuw</span></div>
    <div><span>blozen</span> - <span>ik bloos</span></div>
  </div>
</section>