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

我有一個類似的問題 - 向表格添加操作按鈕。 我得出了以下方法：

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 非常相似的字典，其中每個鍵 - 是一列（即 Python 術語中的list ）。 這里是它的樣子（注意“被阻止”——這是行動的結果）：

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