Align the items (dynamic) inside the span tag horizontally

NOTE: The list is updated dynamically ( length of the list is not constant )

I want to align these items horizontally, I tried using different CSS properties like display: inline, float: left, with flex and I also tried using beta_columns but the whole layout is messed up, I thought it provides an equal width to each item and also aligns the items horizontally.
( I know is somewhat weird ).

Here is the code :

import streamlit as st

x = ["Banana", "Apple", "Orange", "Pear", "Nectarine"]

for i in x:
    st.markdown(
        f'<span style="background-color:#00C4EB;border-radius:5px;box-shadow: 0 5px 0 rgb(0, 116, 191);color: #FFFFFF;padding: 0.5em 1em;position: relative;text-decoration: none;font-weight:bold;cursor: pointer;">{i}</span>', unsafe_allow_html=True)

import streamlit as st

x = ["Banana", "Apple", "Orange", "Pear", "Nectarine"]
length = len(x)
if x:
    for i in range(length):
        cols = st.beta_columns(length)
        cols[i].markdown(
            f'<span style="background-color:#00C4EB;border-radius:5px;box-shadow: 0 5px 0 rgb(0, 116, 191);color: #FFFFFF;padding: 0.5em 1em;font-weight:bold;cursor: pointer">{x[i]}</span>', unsafe_allow_html=True)

Hi @hritik5102,
How about this???

import streamlit as st

x = ["Banana", "Apple", "Orange", "Pear", "Nectarine"]
length = len(x)
if x:
    for i in range(length):
        cols = st.beta_columns(length)
        
    for i in range(length):    
        cols[i].markdown(
            f'<span style="background-color:#00C4EB;border-radius:5px;box-shadow: 0 5px 0 rgb(0, 116, 191);color: #FFFFFF;padding: 0.5em 1em;font-weight:bold;cursor: pointer">{x[i]}</span>', unsafe_allow_html=True)


I got this :point_down:

1 Like

Sir, it worked but not for a large list of items, the space between two items is gone.
it tries to adjust itself in that region only.