WordPress新手求助：修改Elementor卡片Read More按钮样式

问题分析 #

你当前的CSS代码中，width: 100%会让按钮占满卡片整个宽度，结合Elementor的布局继承逻辑，导致标题、描述也被意外居中。需要调整样式规则，仅针对按钮实现居中并添加边框，不影响其他元素。

修正后的CSS代码 #

.elementor-widget-posts a.elementor-post__read-more {
    /* 将按钮设为块级元素，便于单独控制居中 */
    display: block;
    /* 按钮宽度自适应文本内容，也可设固定值如150px */
    width: fit-content;
    /* 水平居中，margin-top可调整与上方内容的间距 */
    margin: 1rem auto 0;
    /* 添加边框，颜色、粗细可自行修改 */
    border: 2px solid #000;
    color: #000;
    background-color: #ffd9d9;
    border-radius: 6px;
    /* 内边距优化按钮视觉效果，避免文本紧贴边框 */
    padding: 0.5rem 1.5rem;
    /* 确保按钮内部文本居中 */
    text-align: center;
}

关键调整说明 #

• 移除width: 100%，改用width: fit-content让按钮宽度适配文本，避免占满整个容器影响其他元素布局。
• 通过margin: 1rem auto 0实现按钮水平居中，同时灵活控制与上方内容的间距。
• 新增border属性设置按钮边框，可根据需求调整边框颜色、粗细甚至样式（比如dashed虚线）。
• 增加padding优化按钮内部文本的留白，提升整体美观度。
• 使用更精确的选择器.elementor-widget-posts a.elementor-post__read-more，确保样式仅作用于目标按钮，避免全局污染。

使用提示 #

将上述代码添加到Elementor的全局自定义CSS或对应卡片模块的自定义CSS中即可生效。若仍存在样式冲突，可尝试在选择器末尾添加!important（不推荐优先使用，仅作为最后调试手段）。

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