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

是否可以让第一行文本（或内联块）向左对齐，而下一行向右对齐，只使用CSS？我相信这可以用JS来完成，但我正在寻找一个更干净、更简单的解决方案

我有这个导航栏（它是标记中的

）。它通常只有一行，但最近我们遇到了一个案例，当它长到足够长时，它就断到了第二行。下面是那张照片。老板让我做的是将第二行向右对齐，同时保持第一行不变

现在看起来是这样的：

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

标记。所有

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>

公司
策略
财产保险
附加条款
公共责任
公共责任附加
雇主责任
引号

我确实误解了他想要什么对不起大家，为什么不试试这个呢。我认为下面的css应该可以工作

ol{
    float: right;
}
ol li{
   float: left;
}

---

这个答案基于这样一个想法，即如果导航条超过了父项宽度，那么它的浮动就不一定重要，但将所有内容向右对齐可以确保它位于您想要的位置。将列表项向左浮动，使所有内容都能以正确的顺序显示

我确实误解了他在寻找什么对不起，大家，为什么不试试这个呢。我认为下面的css应该可以工作

ol{
    float: right;
}
ol li{
   float: left;
}

---

这个答案基于这样一个想法，即如果导航条超过了父项宽度，那么它的浮动就不一定重要，但将所有内容向右对齐可以确保它位于您想要的位置。将列表项浮动到左侧，可以按正确的顺序显示所有内容

您可以尝试使用

方向

属性+

文本对齐：对齐

填充整个

第一行

这涉及到什么

它反转

li的
读取方向
（作为内联框）和
标点符号

如果只有一行，

li

s站在右边

基本CSS

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

注意：太糟糕了

文本对齐

不能通过伪类

：first-line

覆盖

---

您还有

display:flex

属性

基本CSS：

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

---

您可以尝试使用

direction

property+

text align:justify

填充整个

第一行

这涉及到什么

它反转
li的
读取方向
（作为内联框）和
标点符号

如果只有一行，
li
s站在右边

基本CSS

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

注意：太糟糕了
文本对齐
不能通过伪类
：first-line
覆盖


您还有
display:flex
属性

基本CSS：

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

请发布你的HTML和CSS。你能不能也编辑一下图片，以表明你实际上希望它如何显示？我不认为会有一个“干净”的解决方案，因为你需要非常具体的断点。JS无疑是一个不错的选择。请发布您的HTML和CSS。您是否可以编辑图像以表明您实际希望它如何显示？我认为不会有“干净”的解决方案，因为您需要非常具体的断点。JS无疑是一种选择。我想你误解了这个要求。甚至有一个
：：first-line
伪选择器来选择第一行，但它只对某些属性有效，
text-align
不是其中之一。您的解决方案的问题是，我想要一个动态的，如果其中一个标签发生变化，并且线条在另一个点上断裂，则该解决方案会起作用。
第一行
适用于文本，您正在尝试对齐块，不是吗？我的项目是内联块。我误解了这个问题，不过，我相信上面的回答应该会帮助他。我想你误解了这个要求。甚至有一个
：：first-line
伪选择器来选择第一行，但它只对某些属性有效，
text align
不是其中之一。您的解决方案的问题是，我想要一个动态的，如果其中一个标签发生变化，并且线条在另一个点上断裂，则该解决方案会起作用。
第一行
适用于文本，您正在尝试对齐块，不是吗？我的项目是内联块。我误解了这个问题，我相信上面的答案应该会帮助他。这个想法很酷，但元素的呈现顺序似乎有问题。不幸的是，从右向左更改方向也会以相同的方式更改顺序。对我来说，在标记中重新排列它们不会有问题，例如，以相反的顺序编写它们，但这些解决方案都不起作用-更正顺序-除非您确切知道哪些元素是第一行的一部分，哪些是第二行的一部分。@Robert这正是我所说的警告，您有display:flex，这可能是以后浏览器的一个选项：我也无法找到任何Flexbox解决方案来解决这个问题。您在画笔中呈现的是固定的，所有元素共享16,63%的大小。我正在寻找一种动态的解决方案（可以处理不同大小和内容的列表），其中元素大小是灵活的（取决于内容，而不是硬编码）。@Robert remove width，或设置最小宽度，但