Streamlit 如何在一行中显示按钮答案

【问题标题】：Streamlit how to display buttons in a single lineStreamlit 如何在一行中显示按钮
【发布时间】：2021-11-28 05:01:18
【问题描述】：

大家好，我正在用 python 中的 streamlit 构建一个简单的 Web 应用程序。我需要添加 3 个按钮，但它们必须在同一行。

显然，下面的代码将它们放在三个不同的行

st.button('Button 1')
st.button('Button 2')
st.button('Button 3')

你有什么建议吗？

【问题讨论】：

标签： python streamlit

【解决方案1】：

显然应该这样做

col1, col2, col3 = st.columns([1,1,1])

with col1:
    st.button('1')
with col2:
    st.button('2')
with col3:
    st.button('3')

【讨论】：

【解决方案2】：

我遇到了类似的问题 - 向表格添加操作按钮。我想到了以下方法：

import streamlit as st

        # # Show users table 
        colms = st.columns((1, 2, 2, 1, 1))
        fields = ["№", 'email', 'uid', 'verified', "action"]
        for col, field_name in zip(colms, fields):
            # header
            col.write(field_name)

        for x, email in enumerate(user_table['email']):
            col1, col2, col3, col4, col5 = st.columns((1, 2, 2, 1, 1))
            col1.write(x)  # index
            col2.write(user_table['email'][x])  # email
            col3.write(user_table['uid'][x])  # unique ID
            col4.write(user_table['verified'][x])   # email status
            disable_status = user_table['disabled'][x]  # flexible type of button
            button_type = "Unblock" if disable_status else "Block"
            button_phold = col5.empty()  # create a placeholder
            do_action = button_phold.button(button_type, key=x)
            if do_action:
                 pass # do some action with row's data
                 button_phold.empty()  #  remove button

而且效果很好。对象 - user_table - 是一个与 DataFrame 非常相似的字典，其中每个键 - 是一列。这里是它的样子（注意“被阻止”——这是行动的结果）：

【讨论】：

【解决方案3】：

我用 css 样式修复它MOZILLA

import streamlit as st

css_code_tree_button_side_by_side= '''
<style>
#root > div:nth-child(1) > div > div > div > div > section > div > div:nth-child(1) > div > div:nth-child(2) > div{
    display: -webkit-inline-box;
    width: 180px;
}
#root > div:nth-child(1) > div > div > div > div > section > div > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(-n+3){
    width: 50px!important;
}
#root > div:nth-child(1) > div > div > div > div > section > div > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(-n+3) > div{
    width: 50px!important;
}
#root > div:nth-child(1) > div > div > div > div > section > div > div:nth-child(1) > div > div:nth-child(2) > div > div:nth-child(-n+3) > div > button{
    width: fit-content;
}
</style>
'''


st.markdown(css_code_tree_button_side_by_side, unsafe_allow_html=True)
#I know where this 'box' is so I can play with it
with st.container():
    if st.button('a'):
        pass
    if st.button('b'):
        pass
    if st.button('c'):
        pass

【讨论】：