Rank Math FAQ 卡片化排版與跨容器對齊

整理日期：2026-03-30

狀況

問答樣式單調：使用 Rank Math FAQ 區塊產生的問答頁面，預設只是簡單的流水文字排列，沒有視覺區隔與陰影，在長列表下顯得極其擁擠且難以閱讀。
跨容器對齊失效：將 FAQ 改為卡片樣式後，發現 FAQ 卡片與上方由佈景主題 Hook 注入的分類選單（使用 Elementor 容器製作）左側無法對齊。使用固定像素值（如 margin-left）在不同螢幕尺寸下皆會跑版。

先拆成幾層看

結構層：檢視 Rank Math FAQ 區塊在前端渲染產生的 HTML 結構與 Class 命名。
樣式層：如何用純 CSS 進行卡片化包裝（包含陰影、圓角、懸停效果與邊框提示），確保全站通用且無須依賴額外的 JS。
容器層：分析「分類選單」與「FAQ 內容」的 DOM 層級關係。兩者是否處於同一個父容器中，其最大寬度（max-width）與置中邏輯是否一致。

最後發現

對齊失效的原因在於兩者位於完全不同的 DOM 容器中：

上方的分類選單是由自訂區塊 Hook 在內容區外面，使用 Elementor 的容器邏輯（限制 max-width: 1140px; margin: 0 auto; padding: 0 10px）。
下方的 FAQ 區塊是在文章內容區（entry-content）內，使用佈景主題預設的滿版容器。

當兩個容器的基本寬度與邊距設定不同時，試圖在子元素上用固定的 margin 或 padding 微調是無效的。最可靠的對齊方式是直接複製目標容器的寬度與間距限制邏輯。

修正方式

在「外觀 > 自訂 > 附加的 CSS」中加入以下 CSS 樣式，同時處理卡片化排版與容器對齊：

/* === Rank Math FAQ 卡片化與對齊排版 === */

/* 1. 讓區塊外層容器複製 Elementor 容器的寬度與對齊邏輯 */
.rank-math-block {
  max-width: 1140px;
  margin: 40px auto 0;
  padding: 0 10px 40px;
}

/* 2. 限制實際問答列表的寬度，維持閱讀舒適性 */
.rank-math-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
}

/* 3. 卡片化問答項目 */
.rank-math-list-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.rank-math-list-item:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* 4. 問題標題區塊（含左側品牌主色邊框） */
h3.rank-math-question {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  padding: 20px 24px !important;
  border-left: 4px solid #009fe8; /* 可替換為品牌主色 */
  background: #f8fbff;
}

/* 5. 回答內容區塊 */
.rank-math-answer {
  padding: 16px 24px 20px !important;
  border-top: 1px solid #f0f0f0;
}

.rank-math-answer p {
  margin-bottom: 12px !important;
  line-height: 1.75 !important;
  color: #4b4f58;
}

.rank-math-answer p:last-child {
  margin-bottom: 0 !important;
}

.rank-math-answer a {
  color: #009fe8;
  font-weight: 500;
}

不建議先做的事

避免使用固定像素（px）的絕對位移來強行對齊，這在平板與行動裝置等不同解析度下一定會再次跑版。
不要試圖在頁首區塊內包裝整個 FAQ 內容以求同一個容器，這會破壞 WordPress 內容管理的獨立性。

下次遇到可以先整理什麼

對齊有落差的兩個區塊，在 HTML 結構中各自的父層 Container 是哪一個 Class。
在 DevTools 的 Computed 面板中，比對這兩個容器的 max-width、margin-left/right 以及 padding-left/right 數值。
只要直接複製並覆寫該容器的邊距設定，就能在 RAG 響應式網頁上完美對齊。

Rank Math FAQ 卡片化排版與跨容器對齊

狀況

先拆成幾層看

最後發現

修正方式

不建議先做的事

下次遇到可以先整理什麼

標籤