文章卡片閱讀更多按鈕對齊與絕對定位排版

整理日期：2026-04-27

狀況

首頁的「精選文章」區塊中，每個文章卡片底部的「閱讀更多」按鈕出現排版瑕疵：

按鈕高低不一：因為每篇文章的摘要（Excerpt）文字長度不同，導致按鈕的垂直位置在各卡片中參差不齊、浮動不定。
樣式突兀：按鈕顯示為滿版的白色矩形框，文字置中且佔滿整張卡片寬度，與整體設計不搭。業主希望改為純文字、無背景色，且統一固定在卡片的右下角。

先拆成幾層看

外掛與結構：確認該文章格點（Post Grid）是由哪一個 Elementor 擴充外掛（如 UAEL）渲染的，並檢視其輸出的 Class 名稱。
排版模型：若使用 Flex 或 Block 排版，摘要長度的差異必然會推擠下方的按鈕。是否能透過卡片容器設定 relative，並將按鈕設為 absolute 定位，使其徹底脫離一般文件流（Normal Flow）。
樣式覆寫：如何在不影響全站其他按鈕的前提下，針對該特定網格元件進行精準的局部 CSS 覆寫。

最後發現

該精選文章區塊是使用 Ultimate Addons for Elementor (UAEL) 的 Posts widget 製作：

該外掛預設將按鈕設為 Full Width，且背景色綁定了全域全站顏色（Global Color），因而產生滿版白條。
傳統上使用 margin-top: auto 或 Flexbox 來推擠按鈕，在此特定外掛的巢狀 DOM 結構下很容易失效或被外掛內建的 CSS specificity 覆蓋。
最直接且相容性最高的解法，是將卡片背景容器設為相對定位（relative），並將按鈕以絕對定位（absolute）釘在右下角，同時在內容區下方預留適當的內縮（padding-bottom）以防文字重疊。

修正方式

在 Elementor 的該 Posts widget 編輯面板中，切換至 進階 > 自訂 CSS（此處的 selector 會自動 Scope 限制在該 widget 中，不影響全站）：

修正後的 CSS 代碼

/* 1. 將卡片背景包裝容器設為相對定位，做為絕對定位的錨點 */
selector .uael-post__bg-wrap {
    position: relative;
}

/* 2. 內容區塊下方預留足夠的高度空間，避免摘要文字壓到右下角按鈕 */
selector .uael-post__content-wrap {
    padding-bottom: 48px !important;
}

/* 3. 將閱讀更多按鈕強制釘在卡片右下角，並清除背景框與寬度限制 */
selector .uael-post__read-more.elementor-button {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    background-color: transparent !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

不建議先做的事

不要試圖用 text-align: right 去對齊按鈕文字，因為按鈕本身若被設定為寬度 100%（Full Width），對齊按鈕內部的 span 文字無法改變按鈕本身的白色矩形背景。
避免為了對齊按鈕而強制截斷所有文章的摘要字數為相同長度，這會限制編輯在撰寫文章導言時的彈性。

下次遇到可以先整理什麼

該網格元件中，卡片最外層的包裹容器 Class（例如 .uael-post__bg-wrap）與按鈕本體的 Class。
利用 DevTools 檢查該按鈕是否有設定全域顏色綁定，或是在 Elementor 編輯器中點擊按鈕顏色旁的「地球」圖示將其切換為「自訂（鉛筆）」以清除預設色彩。
設計卡片式排版時，只要有「按鈕需固定在底部」的需求，**「容器相對定位 + 按鈕絕對定位 + 內容區下方補 padding」**是最穩健的萬用公式。