分页

此食谱模式演示了用于显示分页的导航模式，用户可以使用该模式在内容页面之间移动，例如搜索结果。

Links to sets of pages in a paged listing

要求

分页模式通常在一行中显示项目。为了确保使用屏幕阅读器的人能够理解分页，我们将项目标记为列表，该列表位于 <nav> 元素中，然后使用 CSS 将布局视觉上显示为一行。

通常，分页组件将水平居中在内容下方。

此模式使用弹性盒布局布局，一个弹性容器嵌套在另一个弹性容器中。为了能够使用 justify-content 属性将列表居中，<nav> 元素被指定为弹性容器。

列表本身也成为弹性容器，以将项目排列为一行。为了对项目进行间距，我们可以在弹性项目上使用 margin，或者在弹性容器上添加 gap。

css

.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}

我们希望确保使用屏幕阅读器的人能够理解此导航的作用，以及单击链接后他们将去往何处。为了帮助实现这一点，我们在 <nav> 元素上添加了 aria-label="pagination"。

我们还添加了一些其他内容，这些内容将被屏幕阅读器读取，但视觉上隐藏，并在分页箭头设置了 aria-hidden 属性。

本文档末尾的“另请参阅”部分包含指向相关无障碍性主题的链接。