为WordPress的GTranslate插件添加自定义CSS：底部边距与旗帜垂直排列

一、搞定底部边距不生效的问题 #

你用的.gtranslate_wrapper没生效，大概率是选择器优先级不够，或者插件实际渲染的DOM结构里，这个类不是控制边距的目标元素。试试这两种方法：

• 提高选择器优先级：给选择器加上WordPress侧边栏小部件的父类前缀，或者直接加!important强制覆盖：

.widget .gtranslate_wrapper {
    margin-bottom: 50px !important;
}

• 换个更精准的选择器：如果上面的还是不行，试试定位插件核心容器.gtranslate：

.gtranslate {
    margin-bottom: 50px;
}

二、实现旗帜垂直排列 #

要让旗帜竖着排，得把插件默认的横向布局改成纵向，用以下CSS：

/* 针对列表式旗帜，改成纵向flex布局 */
.gtranslate_wrapper ul {
    flex-direction: column !important;
    gap: 10px; /* 可选：给旗帜之间加间距 */
}

/* 针对按钮式旗帜，设置成块级元素实现垂直排列 */
.gtranslate_wrapper a.gflag {
    display: block !important;
    margin-bottom: 10px; /* 每个旗帜底部留间距 */
}

三、添加CSS的正确位置 #

在WordPress后台，直接走「外观 → 自定义 → 额外CSS」把代码粘进去就行；要是怕主题更新丢代码，也可以加在子主题的style.css文件里。

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