如何在Streamlit多页面应用中为表情符号与页面名称添加间距

可以通过自定义CSS注入实现需求，Streamlit支持通过st.markdown添加自定义样式，以下是可行方案：

• 在主应用文件（如app.py）中添加以下代码注入CSS：

import streamlit as st

# 注入自定义样式
st.markdown("""
<style>
/* 针对侧边栏导航的每个页面项，用flex布局控制间距 */
.stSidebar [data-testid="stSidebarNav"] li a {
    display: flex;
    align-items: center;
    gap: 12px; /* 表情与文字的间距，可根据需求调整数值 */
}
</style>
""", unsafe_allow_html=True)

• 如果上述选择器不生效，可尝试精准定位表情元素（适配不同Streamlit版本的动态类名）：

st.markdown("""
<style>
/* 给侧边栏导航中的表情元素添加右侧间距 */
.stSidebar [data-testid="stSidebarNav"] .st-emotion-cache-12fmjuu {
    margin-right: 12px;
}
</style>
""", unsafe_allow_html=True)

说明：

• 不同版本的Streamlit可能会生成不同的动态CSS类名（如st-emotion-cache-xxx），如果样式失效，可通过浏览器开发者工具（F12）选中表情元素，查看其具体类名或父元素选择器，替换到CSS代码中即可。
• gap属性基于flex布局控制子元素间距，兼容性更优；margin-right则直接给表情元素添加右侧外边距，同样能实现间距效果。

内容的提问来源于stack exchange，提问作者Jamiu S.