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)