Streamlit 如何在一行中显示按钮

Question

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

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

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

你有什么建议吗？

Answer 1

显然应该这样做

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

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

Answer 2

我遇到了类似的问题 - 将操作按钮添加到 table。我得出以下方法：

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 非常相似的字典，其中每个键都是一列。这是它的样子（注意“已阻止”——这是操作的结果）：

Answer 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

Streamlit 如何在一行中显示按钮

Streamlit how to display buttons in a single line

python

streamlit