Html 使用CSS以错误方向显示的数字

我正在尝试使用css在同一行中列出数字。这是工作，除了数字显示在错误的方向，即4-3-2-1，而不是1-2-3-4。我试着用direction:ltr，但没用

对于我的css，我有以下内容：

.pagination {
  clear: both;
  display: inline;
}

.page-number {
  border: 1px solid #ccc;
  color: #555;
  padding: 10px;
  float: right;
}

<div class="pagination">
    <div class="page-number">1</div>
    <div class="page-number">2</div>
    <div class="page-number">3</div>
    <div class="page-number">4</div>
</div>

在我的HTML视图中，我有：

.pagination {
  clear: both;
  display: inline;
}

.page-number {
  border: 1px solid #ccc;
  color: #555;
  padding: 10px;
  float: right;
}

<div class="pagination">
    <div class="page-number">1</div>
    <div class="page-number">2</div>
    <div class="page-number">3</div>
    <div class="page-number">4</div>
</div>

我需要做哪些更改才能使此显示方向正确

为了澄清，我不能简单地浮动：左，因为我希望数字显示在页面的右侧。所以我希望它们作为一个整体向右浮动，但按正确的顺序显示，从左到右。

将浮动改为向左。由于您将浮点设置为右侧，因此它会以错误的顺序显示它们

看这里：

---

出现问题的原因是您将四个元素向右浮动，但希望它们以相同的顺序显示。基本上，第一个元素向右浮动，然后是第二个，然后是第三个，以此类推

为了解决这个问题，您需要在每个元素上使用float:left，并给分页包装器本身一个float:right。请注意，如果使用float:right，display:inline将被忽略，因为浮动元素会自动应用display:block。因此，我将其从示例中删除：

.分页{ 明确：两者皆有； 浮动：对； } .页码{ 边框：1px实心ccc； 颜色：555； 填充：10px； 浮动：左； } 1. 2. 3. 4. 使您的div显示“inline block”，并在主div“right”中文本对齐

.分页{ 明确：两者皆有； 文本对齐：右对齐； } .页码{ 边框：1px实心ccc； 颜色：555； 填充：10px； 显示：内联块； } 1. 2. 3. 4.

---

它可以很容易地用justify内容完成：flex-end；在flexbox中

.分页{ 显示器：flex； 证明内容：柔性端； } .页码{ 边框：1px实心ccc； 颜色：555； 填充：10px； } 1. 2. 3. 4.

---

将float改为left，但我希望数字显示在页面的右侧。因此，如果我使用float:left，则修复了顺序问题，但也将它们移到了页面的错误一侧。@Muirik只需按相反顺序列出数字，然后使用float:right；请更正。但我希望数字显示在页面的右侧。因此，如果我使用float:left来修复订单问题，但也会将它们移动到页面的错误一侧。您必须在父元素上设置float:right，以便整个按钮组都向右移动。谢谢，这很有效。我最初避开了这一点，因为当我在同一个类中添加float:right和display:inline时，我的IDE给了我一个警告，说float将被忽略。但我想那不是真的。谢谢没问题，听起来像是一个奇怪的IDE；如果你真的想要，你可以通过添加一个辅助容器来绕过警告：@Muirik它实际上是相反的-display:inline一旦你将它设置为float:left或right就会被忽略。是的，float使display=block不管你指定什么，请看这里：@Pangloss这是我的IDE告诉我的，这是一个较少的文件：属性由于显示而被忽略。对于“display:inline”，宽度、高度、边距顶部、边距底部和浮动属性没有任何影响。我想为flexbox布局添加一个非常好的参考：。使用flexbox的主要优点是你不必关心清除浮动。是的，我最喜欢这个选项。它是最干净的，不会引起冲突或不必要的副作用。这是一个很好的选择。唯一的问题是它在每个元素之间添加了填充。它添加了2倍的边距，我认为他将在xD中生存