我想知道如何让 10 个标题在引导列上均匀分布，目标是将它们与上面行/列中的条形图中的条对齐。我什至不知道如何用谷歌搜索这个，我应该从哪里开始？
所以这是一个开放式问题，这是我可以通过标题上的 CSS 格式轻松完成的事情吗？(html.h1()) ？有没有办法可以根据屏幕尺寸在标题之间添加间距？像 px vs. em 等......或者我应该深入研究以情节方式构建我的图形对象并以某种方式制作一些自定义标签。
所以要重新迭代 - \'12345678910\' 位于图表下方的单独引导行/列上。我希望 10 个标题中的每一个都与 10 个条居中对齐，这样我就可以创建自定义数据读数。
标签： python css plotly plotly-dash dashboard
您可以通过在assets/style.css 中添加以下 sn-p 来实现您正在寻找的内容：
.grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-column-gap: 25px;
}
.alignCards {
text-align: center;
max-width: 86%;
margin: 0px auto;
}
.cardBorders {
border: 1px solid black;
}
在破折号元素中，您需要添加刚刚创建的类：
html.Div([html.Div(html.H1(n), className="cardBorders") for n in range(10)],
className="grid alignCards")
以下是可用于测试的完整代码：
from dash import Dash, dcc, html, Input, Output
import random
import plotly.express as px
import pandas as pd
df=pd.DataFrame.from_dict([{"x":val, "y":random.random()} for val in range(10)])
app = Dash(__name__)
app.layout = html.Div(
[
dcc.Graph(figure=px.bar(df, x="x", y="y")),
html.Div([html.Div(html.H1(n), className="cardBorders")for n in range(10)],
className="grid alignCards"),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
PS：尝试将您的容器大小限制为特定宽度，一旦完成，将更容易找到正确的值来对齐条形和卡片
我希望它可以解决您的问题，如果答案有帮助，请不要忘记投票并将其标记为答案！
问候，
莱昂纳多
【讨论】：