在破折号应用程序中水平排列元素
Posted
技术标签:
【中文标题】在破折号应用程序中水平排列元素【英文标题】：Arranging elements horizontally in a dash application 【发布时间】：2022-01-05 07:29:09 【问题描述】：我正在尝试在 python 中开发 Dash 应用程序。我尝试将style='display': 'inline-block' 添加到 html.Div() 组件以及其他组件，但无法将下拉菜单设置为在一行中对齐。
页面如下：
使用内联样式： 没有内联样式：
问题中的代码是作为模板提供给我的，需要正确填写。复杂的层次结构是模板的一部分。我的工作是根据需要添加代码。我只添加了代码中有问题的部分（没有标题和图像中显示的图形元素）：
df = pd.read_csv("dash\Pricing Data.csv")
colors =
'background': '#111111',
'text': '#7FDBFF'
boxplot_layout = (
dbc.Container(
[dbc.Row(
[
dbc.Col(
[
dbc.Card(
[
dbc.CardBody(
[
dbc.Row(
[
dbc.Col(
html.Div(
dbc.Row(
[
dbc.Col(
[
dcc.Dropdown(
id="aggregate-dropdown",
options=[
"label": "Total",
"value": "sum",
,
"label": "Average",
"value": "average",
,
],
value="sum",
style=
'textAlign': 'center',
# 'color': colors['text']
,
)
],
),
dbc.Col(
[
dcc.Dropdown(
id="y-dropdown",
options=[
'label': i, 'value': i
for i in df.columns],
style=
'textAlign': 'center',
,
value='Age'
)
],
),
dbc.Col(
[
html.Label(
"by",
style=
'textAlign': 'center',
# 'color': colors['text']
)
],
),
dbc.Col(
[
dcc.Dropdown(
id="x-dropdown",
options=[
'label': i, 'value': i
for i in df.columns],
style=
'textAlign': 'center',
'padding': '3px ',
,
value='Age'
)],),],)))],),])],inverse=True,)])])]))
app.layout = boxplot_layout
if __name__ == "__main__":
app.run_server(debug=True)
此外，如图所示，还有一条错误消息。我找不到此错误的解决方案，所以如果您对它的原因或如何找到它有任何想法，如果您也能发布它，我将不胜感激。
谢谢。
【问题讨论】：
【参考方案1】：关注文档example:
dbc.Row(
[
dbc.Col(html.Div("One of three columns")),
dbc.Col(html.Div("One of three columns")),
dbc.Col(html.Div("One of three columns")),
]
),
它会产生你所追求的东西。所以，这是基本结构，删除不必要的代码，如下：
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import pandas as pd
df = pd.read_csv()
colors =
'background': '#111111',
'text': '#7FDBFF'
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
dbc.Container([
dbc.Row([
dbc.Col(
html.Div([
dcc.Dropdown(
id="aggregate-dropdown",
options=[
"label": "Total",
"value": "sum",
,
"label": "Average",
"value": "average",
,
],
value="sum",
style=
'textAlign': 'center',
# 'color': colors['text']
,
)
]), width=3
),
dbc.Col(
html.Div([
dcc.Dropdown(
id="y-dropdown",
options=[
'label': i, 'value': i
for i in df.columns],
style=
'textAlign': 'center',
,
value='Age'
)
]), width=3
),
dbc.Col(
html.Div([
html.Label(
"by",
style=
'textAlign': 'center',
# 'color': colors['text']
)
]), width=1
),
dbc.Col(
html.Div([
dcc.Dropdown(
id="x-dropdown",
options=[
'label': i, 'value': i
for i in df.columns],
style=
'textAlign': 'center',
,
value='Age'
)
]), width=3
),
])
])
])
if __name__ == "__main__":
app.run_server(debug=True)
注意我传递了一个 'width=' 关键字参数来设置列的大小。
结果就是这样：
result
我希望它可以帮助您找到更好的方式来组织您的代码。
【讨论】：
谢谢。我正在尝试应用您的解决方案。您是否简化了层次结构？ 是的，删除 dbc.Cards 和 Cardbody 的东西【参考方案2】：我最终所做的是更改下拉菜单的列组件内的样式，以及下拉菜单本身的样式。我使用了标签“填充”和“宽度”并更改了它们的值，直到看起来没问题。我还为“显示”标签使用了值“内联块”。
例如，下面是其中一个下拉菜单及其列的代码：
dbc.Col(
[
dcc.Dropdown(
id="y-axis-dropdown",
options=
['label': i, 'value': i for i in df.columns],
value='Age',
style='textAlign': 'center'
)
], style=
'display': 'inline-block',
'width': '25%',
'padding': 30,
'textAlign': 'center'
)
【讨论】：
以上是关于在破折号应用程序中水平排列元素的主要内容，如果未能解决你的问题，请参考以下文章
css中水平并列有三个div块元素,左边的div给了左浮动,可为啥左边哪个没有在最左？