Streamlit应用底部固定文本搜索框与语音按钮问题求助

尝试在Streamlit应用UI底部同时固定文本搜索框和语音搜索按钮，但仅文本框成功固定在底部，按钮会随页面滚动而移动，且需要实现语音搜索按钮与搜索文本框底部对齐。当前使用的代码如下：

text_col, button_col = st.columns([4, 1])

# Define styling for both elements
style = """
<style>
  #stButtonVoice {
    position: fixed;
    bottom: 0;
    right: 0;
    margin-left: 1rem;
  }
  
  .stTextInput {
    position: fixed;
    bottom: 0;
    left: 0;
    margin-right: 1rem;
  }
</style>
"""

# Inject the styling code for both elements
st.markdown(style, unsafe_allow_html=True)

# Add your text input and button
with text_col:
    text_input = st.text_input(
        "Any further query?", placeholder="search here...", key="text_input")

with button_col:
    voice_search_button = st.button("Voice Search", key="stButtonVoice")

当前效果：文本框固定在页面底部，语音按钮随页面滚动移动，且两者未实现底部对齐。

核心问题在于CSS选择器定位错误和columns布局与固定定位的冲突：

1. Streamlit中按钮的key对应的是外层容器而非按钮本身，直接给容器加固定定位会破坏columns的布局逻辑
2. 固定定位的元素需要统一在父容器中控制，才能保证对齐和布局稳定性

修改后的可行代码如下：

# 注入自定义样式
st.markdown("""
<style>
/* 固定在底部的容器 */
.fixed-bottom-bar {
    position: fixed;
    bottom: 20px; /* 避免被浏览器底部或Streamlit元素遮挡 */
    left: 20px;
    right: 20px;
    display: flex;
    align-items: flex-end; /* 强制元素底部对齐 */
    gap: 12px;
    z-index: 999; /* 确保在所有内容上方显示 */
}

/* 调整文本输入框的宽度占比 */
.fixed-bottom-bar .stTextInput {
    flex: 1;
    margin: 0;
}

/* 移除按钮默认的上下边距，确保底部对齐 */
.fixed-bottom-bar .stButton {
    margin: 0;
    display: flex;
    align-items: flex-end;
}
</style>
""", unsafe_allow_html=True)

# 使用自定义容器包裹输入框和按钮
with st.container():
    st.markdown('<div class="fixed-bottom-bar">', unsafe_allow_html=True)
    text_input = st.text_input("Any further query?", placeholder="search here...", key="text_input")
    voice_search_button = st.button("Voice Search", key="stButtonVoice")
    st.markdown('</div>', unsafe_allow_html=True)

关键调整说明 #

• 用自定义的fixed-bottom-bar容器统一管理两个元素，通过flex布局实现横向排列和底部对齐
• 设置z-index:999确保固定栏不会被页面其他内容覆盖
• 调整bottom值留出缓冲空间，避免输入框和按钮被遮挡
• 移除columns布局，因为固定定位元素会脱离原文档流，columns的比例控制会失效

内容的提问来源于stack exchange，提问作者Bhanu Chander