在Streamlit中,我有一个主统计数据列和一个比较列.比较列的指标成分有Delta,而主要指标成分没有.此增量会使比较列中的所有以下组件错位.如何使增量和非增量指标占据相同的垂直空间,以便指标后面的元素不会错位?

问题(注意水平线如何错位):

import streamlit as st

c1, c2, c3 = st.columns(3)
with c1:
    st.metric("Main", 1, delta=None, delta_color="normal")
    st.write("------------------------")
with c2:
    st.metric("Compare", 1, delta=1, delta_color="normal")
    st.write("------------------------")
with c3:
    st.metric("asdf", 1, delta=None, delta_color="normal")
    st.write("------------------------")

Misaligned metric components

推荐答案

您可以使用自定义CSS来完成您想要的事情:

import streamlit as st

css = """
<style>
div[data-testid="stMetric"] {
    min-height: 100px;
}
</style>
"""
st.markdown(css, unsafe_allow_html=True)

c1, c2, c3 = st.columns(3)

with c1:
    st.metric("Main", 1, delta=None, delta_color="normal")
    st.markdown("---")
with c2:
    st.metric("Compare", 1, delta=1, delta_color="normal")
    st.markdown("---")
with c3:
    st.metric("asdf", 1, delta=None, delta_color="normal")
    st.markdown("---")

它给出:

Aligned dividers

我将高度设置为100 px,但如果您喜欢更紧凑的版本,则可以降低该值.

Html相关问答推荐

用完全透明的边框切割出圆圈?

悬停时放大人物:不要增加其周围边界的大小

将多个内联元素置于中心,而无需访问父级上的CSS

Html视频标签:圆角像素化

使具有FLEX父项的溢出自动的子元素收缩

如何用背景色填充边框半径创建的间隙

div居中碰撞问题

为什么index.html在Django中有这样的名称?

使用不同字体对齐元素

如何防止滑动滚动元素时touch 屏出现空白区域?

来自元标记的响应文本

如何将 元素与常规文本垂直对齐