如何在分页按钮下方添加带间距的分页分隔线？

问题分析 #

你的代码里有两个核心问题导致分隔线效果不符合预期：

• .pagination-break-line 类中设置了 border: none;，直接覆盖了 .break-line 的 border-bottom 样式，导致分隔线无法显示
• .pagination 是 inline-block 元素，默认垂直对齐方式可能和下方分隔线产生额外间距偏差

修复方案 #

1. 修正分隔线样式

修改 .pagination-break-line 的CSS，移除 border: none;，确保分隔线正常显示，同时保留所需上下间距：

.pagination-break-line {
  margin-top: 40px; /* 分页按钮到分隔线的间距 */
  margin-bottom: 40px; /* 分隔线到下方内容的间距 */
  border-bottom: 1px solid #000000; /* 明确设置边框，确保显示分隔线 */
}

2. 优化分页容器的垂直对齐

为 .pagination 添加垂直对齐属性，避免inline-block元素带来的间距问题：

.pagination {
  margin-top: 20px;
  border: 2px double #FFFFFF;
  display: inline-block;
  padding: 5px;
  vertical-align: bottom; /* 确保和下方元素对齐，消除额外间隙 */
}

修改后的完整代码片段 #

CSS部分

.heading {
  display: flex;
  align-items: center;
}

.heading p {
  margin-right: 10px;
}

.break-line {
  border-bottom: 1px solid #000000;
  margin-top: 20px;
  margin-bottom: 20px;
}

.filter {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.filter-box {
  background-color: #22A699;
  height: 10px;
  width: 730px;
  border: 2px double #FFFFFF;
  border-radius: 14px;
  display: flex;
  align-items: center;
  color: white;
  padding: 20px;
  text-decoration: none;
  cursor: pointer;
}

.filter-text {
  margin-right: 10px;
}

.select-input {
  background-color: #FFFFFF;
  color: #3272AC;
  border: 2px double #FFFFFF;
  border-radius: 14px;
  cursor: pointer;
}

.product-title {
  font-family: "Meiryo UI", sans-serif;
  font-size: 18px;
  margin-top: 10px;
  font-weight: bold;
  color: #A9907E;
}

.cheapest-price {
  font-family: "Meiryo UI", sans-serif;
  font-size: 16px;
  margin-top: 10px;
  font-weight: bold;
  color: #9C254D;
}

.pagination {
  margin-top: 20px;
  border: 2px double #FFFFFF;
  display: inline-block;
  padding: 5px;
  vertical-align: bottom; /* 添加垂直对齐 */
}

.pagination-button {
  background-color: #F1C376;
  color: #3272AC;
  border: 2px double #FFFFFF;
  border-radius: 7px;
  padding: 8px 16px;
  margin-right: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pagination-button:hover {
  background-color: #22A699;
  color: #FFFFFF;
}

.pagination-break-line {
  margin-top: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #000000; /* 移除border:none，添加明确边框 */
}

HTML部分（无需修改，保持原结构即可）

<h1 class="page-title" style="font-family: 'Meiryo UI', sans-serif;color: #83764F;">口コミ・カスタマーレビュー</h1>

<div class="heading">
  <p class="left-align">すべての商品</p>
  <p>(5704)</p>
</div>

<div class="break-line"></div>

<p>レビューは使用者の私見です。必ず専門機関で相談してください。</p>
<p>投稿された商品画像は、パッケージリニューアルなどの理由によりデザインが異なる場合があります。</p>

<div class="product-title">
  <p style="font-weight: bold; color: #83764F;">ベンザック5%(benzac-ac)ベピオゲル|過酸化ベンゾイルゲル・ジェル1本60g|ニキビ治療 BK190927002</p>
</div>

<div class="cheapest-price">
  <p style="font-weight: bold; color: #9C254D;">最安値: 2,570円～</p>
</div>

<div class="filter">
  <div class="filter-box">
    <span class="filter-text">並べ替え：</span>
    <select class="select-input" id="sort" name="sort">
      <option value="most_liked" style="background-color: #F1C376; color: #3272AC;">参考になった順</option>
      <option value="recent_review" style="background-color: #F1C376; color: #3272AC;">新しい参考</option>
    </select>
  </div>
</div>

<div class="break-line"></div>

<div class="pagination">
  <button class="pagination-button">前へ</button>
  <button class="pagination-button">1</button>
  <button class="pagination-button">2</button>
  <button class="pagination-button">3</button>
  <button class="pagination-button">4</button>
  <button class="pagination-button">次へ</button>
</div>

<div class="break-line pagination-break-line"></div>

效果说明 #

• 分隔线会正常显示在分页按钮下方，上下各有40px的间距，实现清晰的视觉区分
• 垂直对齐的调整消除了inline-block元素可能带来的意外间隙，确保间距符合设置值

内容的提问来源于stack exchange，提问作者anpanman