本文介绍在 Streamlit 中实现两个按钮（如下载按钮与重置按钮）严格水平对齐、间距紧凑的可靠方法，解决 st.columns 默认拉伸导致按钮分离、原生组件无法内联等常见布局问题。
本文介绍在 streamlit 中实现两个按钮（如下载按钮与重置按钮）严格水平对齐、间距紧凑的可靠方法，解决 `st.columns` 默认拉伸导致按钮分离、原生组件无法内联等常见布局问题。
在 Streamlit 中，默认情况下按钮（包括 st.button 和 st.download_button）是块级元素，会独占一行；即使使用 st.columns，其内部列默认采用弹性布局（flex），且子组件常被自动撑满宽度，导致按钮看似“并排”实则左右留白巨大、间距松散。
✅ 推荐方案：CSS 重置 + 精确列宽控制
核心思路是：用 st.columns 划分容器，再通过自定义 CSS 强制列及其子元素收缩至内容宽度（width: fit-content），从而消除多余空白，让按钮紧密相邻。
以下是完整可运行示例（兼容 st.button 和 st.download_button）：
import streamlit as st
# 关键 CSS：重置 columns 及其子元素的宽度行为
st.markdown("""
<style>
/* 限制列容器自身不拉伸 */
div[data-testid="column"] {
width: fit-content !important;
flex: unset !important;
}
/* 限制列内所有子元素（如按钮）也按内容宽度渲染 */
div[data-testid="column"] * {
width: fit-content !important;
}
</style>
""", unsafe_allow_html=True)
# 创建两列，比例可微调（如 [1, 1] 或 [0.45, 0.55] 避免换行）
col1, col2 = st.columns([1, 1], gap="small")
with col1:
st.download_button(
label="? Download CSV",
data="sample_data".encode('utf-8'),
file_name="data.csv",
mime="text/csv",
key="download_csv"
)
with col2:
if st.button("? Reset Metrics", key="reset_metrics"):
st.session_state.clear() # 推荐替代 st.experimental_rerun()
st.rerun() # Streamlit ≥ 1.32+ 使用 st.rerun()
⚠️ 注意事项与最佳实践：
- st.experimental_rerun() 已弃用，请升级 Streamlit 并改用 st.rerun()；
- 若按钮文字过长或窗口过窄，建议添加 gap="small" 或 "tiny" 控制列间距，并确保列总比例 ≤ 2（避免自动换行）；
- st.download_button 不支持 on_click 回调，如需复杂逻辑，请包裹在 if 块中处理（如上例）；
- 如需更多按钮（如 3 个），可扩展为 st.columns([1, 1, 1]) 并同步应用相同 CSS；
- 此方案兼容所有主流浏览器及 Streamlit Cloud 部署，无需额外依赖。
通过该方法，你将获得真正紧凑、专业、响应式的水平按钮组——既符合 UI 一致性要求，又规避了 HTML 内联 hack 的维护风险。
