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

Question

我正在尝试使用 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;
}

在我的 HTML View 中我有这个:

<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 :左”，因为我希望数字显示在页面的右侧。所以我希望它们作为一个整体向右浮动，但以正确的顺序从左到右显示。

Answer 1

这可以通过在 flexbox 中使用 justify-content: flex-end; 轻松完成。

.pagination {
  display: flex;
  justify-content: flex-end;
}

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

<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>