本文介绍在 Streamlit 中实现两个按钮严格水平并排、间距紧凑的可靠方法，重点解决 st.columns 默认拉伸导致按钮分离的问题，并提供可直接复用的 CSS 修复方案。
本文介绍在 streamlit 中实现两个按钮严格水平并排、间距紧凑的可靠方法，重点解决 `st.columns` 默认拉伸导致按钮分离的问题，并提供可直接复用的 css 修复方案。
在 Streamlit 中，默认组件（包括 st.button 和 st.download_button）在列容器（st.columns）中会自动撑满父容器宽度，导致即使使用等宽列，按钮之间仍存在较大空隙，视觉上无法“紧邻”。单纯依赖 st.columns(..., gap="small") 并不能收缩按钮自身宽度，因此需结合自定义 CSS 强制限制列及内部元素的宽度行为。
✅ 推荐解决方案：使用 st.columns + 精准 CSS 重置
以下代码可确保两个按钮在同一行紧密排列，间距自然、响应友好：
import streamlit as st
# 注入 CSS：禁用列的 flex 拉伸，强制内容宽度自适应
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)
# 创建双列布局（比例不影响最终宽度，仅控制相对位置）
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 覆盖 Streamlit 默认的 flex: 1 行为，使列仅包裹内容；
- div[data-testid="column"] > * 确保按钮等子元素不被强制拉宽；
- gap="small" 控制两列之间的间距（可选值："small" / "medium" / "large"），配合 CSS 后效果更精准；
- 此方案兼容 st.button、st.download_button、st.link_button 等所有按钮类组件。
⚠️ 注意事项：
- 避免在 st.columns 外层再包裹 st.markdown(..., unsafe_allow_html=True) 的 —— Streamlit 的布局模型与原生 HTML 块级/内联逻辑不完全兼容，易失效；
- st.experimental_rerun() 在较新版本 Streamlit（≥1.33）中已标记为弃用，建议升级后改用 st.rerun()；
- 若需三按钮并排，可扩展为 st.columns([1,1,1]) 并复用相同 CSS。
该方法已在 Streamlit 1.30+ 版本稳定验证，是当前最简洁、可维护性最强的水平对齐实践。
