本文详解如何使用 Streamlit 的 st.columns() 配合自定义 CSS，精准实现两个按钮在同一行紧密排列，解决默认列宽撑满、按钮间距过大等常见布局问题。
本文详解如何使用 streamlit 的 `st.columns()` 配合自定义 css，精准实现两个按钮在同一行紧密排列，解决默认列宽撑满、按钮间距过大等常见布局问题。
在 Streamlit 中，默认组件（如 st.button 或 st.download_button）是块级元素，垂直堆叠显示。若希望将多个按钮置于同一行且保持紧凑间距，仅靠 st.columns() 并不能直接达到理想效果——因为 Streamlit 的列容器（data-testid="column"）默认采用 flex: 1 布局，会强制拉伸子元素宽度，导致按钮被“撑开”，彼此距离过远。
✅ 正确做法是：结合列布局与轻量级 CSS 重置，抑制列的弹性伸展行为，并约束内部按钮宽度为内容自适应。
以下为推荐实现方案（兼容 st.button 和 st.download_button）：
import streamlit as st
# 注入 CSS：限制列容器宽度为内容自适应，避免拉伸
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]），gap 控制列间间距（"small" / "medium" / "large"）
col1, col2 = st.columns([1, 1], gap="small")
with col1:
st.download_button(
label="Download data as CSV",
data=filtered_data.to_csv().encode('utf-8'),
file_name='filtered_data.csv',
mime='text/csv',
key="download_csv"
)
with col2:
if st.button("Reset Metrics", key="reset_metrics"):
st.experimental_rerun()? 关键说明：
- width: fit-content !important 确保列容器仅包裹其内容，而非占满可用空间；
- flex: unset !important 覆盖 Streamlit 默认的 flex: 1，防止列自动均分父容器宽度；
- div[data-testid="column"] * 规则进一步确保按钮等子元素也按内容宽度渲染，避免内部元素被列容器强行拉宽；
- gap="small" 提供适度间距（约 0.5rem），比默认 "medium" 更紧凑；如需更小间隙，可配合额外 CSS 微调 margin。
⚠️ 注意事项：
- st.download_button 不支持 on_click 回调（仅触发下载），因此其逻辑无需 if 判断；而 st.button 必须用 if 包裹以响应点击；
- 若页面存在多个并排按钮组，请确保每组使用独立 st.columns()，避免 CSS 影响全局列样式；
- st.experimental_rerun() 在较新版本 Streamlit（≥1.29）中已弃用，建议升级后改用 st.rerun()（无 experimental_ 前缀）。
通过该方法，你既能保持代码简洁性，又能获得专业级 UI 控制力——按钮真正“肩并肩”呈现，兼顾功能完整性与视觉一致性。
