将第一行左对齐，而使用CSS右对齐

Question

是否可以将第一行文本（或内联块）对齐到左侧，而下一个文本（或内联块）仅使用CSS？我确信可以使用JS完成，但我正在寻找一种更简洁的解决方案。

我有这个导航栏（标记中是<ol>）。它通常只有一行，但最近我们得到了一个案例，当它长得足够长时，它就闯到了第二行。下面是那张照片。我的老板要我做的是将第二行对齐，同时保持第一行完好无损。

现在看起来像这样：

我的目标是什么（我然后做一些修复使它看起来比下图更漂亮）：

标记。所有li项都是内嵌块，但我可以更改。

<ol class="phase-labels">
  <li class="phase-label phase-current">Company</li>
  <li class="phase-label phase-inactive">The Policy</li>
  <li class="phase-label phase-inactive">Property Insurance</li>
  <li class="phase-label phase-inactive">Additional Clauses</li>
  <li class="phase-label phase-inactive">Public Liability</li>
  <li class="phase-label phase-inactive">Public Liability Additional</li>
  <li class="phase-label phase-inactive">Employers Liability</li>
  <li class="phase-label phase-inactive">Quotes</li>
</ol>

Answer 1

您可以尝试使用direction属性+ text-align:justify来填充整个first-line。

这涉及到什么？ ：

1. 它反转direction的读数li（如内联框）和 标点符号。
2. 如果只有一行，li站在右边。

<强> DEMO

基本CSS

ol {
  display:block;
  position:relative;
  direction:rtl;
  text-align:justify;
}

注意：错误的text-align无法通过伪类:first-line覆盖。

---

你也有display:flex属性。的 DEMO

基本CSS：

ol {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
}