如何为项目列表元素创建从右到左的布局

默认情况下， 项目清单 默认布局是将图标显示在左侧，文本显示在右侧。通过简单的 CSS 调整，您可以反转布局，使图标显示在右侧，文本右对齐。

这对于以下情况尤其有用：

• RTL语言设计
• 其他列表布局
• 现代用户界面风格
• 创建视觉上独具特色的功能列表

步骤 1：打开项目列表设置

在 GemPages 编辑器中：

• 将鼠标悬停在 项目清单 您想要自定义的元素
• 右键单击该元素
• 选择 自定义代码

这样，您就可以将自定义 CSS 专门应用于该项目列表元素。

步骤 2：添加 RTL 布局代码

将以下代码粘贴到自定义代码部分：

.ElementClass .gp-icon-list-wrapper {

  弹性方向：行反转；

}

.ElementClass .gp-icon-list-wrapper [data-gp-text] {

 文本对齐：权利;

}

步骤 3：替换元素类

更换 .元素类 使用项目列表元素的实际类 ID。

提示：

• 此布局适用于阿拉伯语、希伯来语或从右到左 (RTL) 的设计。
• 结合自定义间距或图标样式，可获得更好的视觉平衡。
• 应用代码后，在桌面和移动设备上预览布局。

步骤 4：保存并发布

完成后：

• 保存您的更改
• 发布或更新您的页面