关键词：
【中文标题】在破折号应用程序中水平排列元素【英文标题】：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中水平+垂直对齐3个元素
】css在一个div中水平+垂直对齐3个元素【英文标题】：cssalignhorizontally+vertically3elementswihinadiv【发布时间】：2012-04-0305:42:38【问题描述】：我正在尝试在div中为一系列3个元素设置我自己的距离：1)一个复选框2)一张图片3)一段文字... 查看详情
css子元素在父元素中水平垂直居中的几种方法
1.水平居中(margin:auto;)子父元素宽度固定，子元素上设置margin:auto;子元素不能设置浮动，否则居中失效。#div1{width:300px;height:300px;border:1pxsolidred;}#div1p{width:100px;height:100px;background-color:green;/*float:left;!*如果设置了浮动，则自动居中就... 查看详情
bootstrap中水平排列的表单form-inline
1<html>2<head>3<title>初识Bootstrap</title>4<metacharset="utf-8">5<metaname="viewport"content="width=device-width,initial-scale=1.0">6<linkrel="stylesheet"href="ht 查看详情
如何让输入单选元素在反应 [material-ui] 中水平对齐？
】如何让输入单选元素在反应[material-ui]中水平对齐？【英文标题】：HowcanIgetinputradioelementstohorizontallyaligninreact[material-ui]?【发布时间】：2016-02-1407:00:09【问题描述】：radio组始终在material-ui中垂直列出。有没有办法水平对齐它们... 查看详情
如何在 Android 中水平滚动 ImageView？
...droid?【发布时间】：2019-01-2503:59:42【问题描述】：在我的应用程序中，我想将图像从服务器显示到ImageView。我的imageView填满整个屏幕，为此我使用android:scaleType="centerCrop"。但是当使用centerCrop时不能显示 查看详情
css中水平垂直居中的几种解决方法
在控制元素的水平、垂直居中问题时，有很多种解决方法，下面介绍几种解决办法：水平垂直居中：第一种：css3的transform.ele{//父元素/*设置元素绝对定位*/position:absolute;/*top50%*/top:50%;/*left50%*/left:50%;/*css3transform实现*/transform:transla... 查看详情
如何在反应中水平对齐2行？
...间】：2021-08-2502:47:45【问题描述】：我正在制作一个反应应用程序，我有几列要映射到值，我想用字段值水平映射字段名称。我尝试使用下面的代码，但它仍然有点不对齐。我的代码：任务类：return(<div><div><aclassName="... 查看详情
css技巧-01如何实现一个元素在页面中水平垂直居中
（1）知道子元素的宽高<!--父元素相对定位--><!--子元素绝对定位-->.childposition:absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px; （2）不考虑子元素的宽高<!--父元素不能有定位--><!--子元素绝对定位-->.childposition... 查看详情
前端学习--css--浮动
...以这个三个div自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流。 使用float来使元素浮动，从而脱离文档流 可选值： none，默认值，元素默认在文档流中排列。 left，元素会立即脱离文档流，向... 查看详情
在 postgresql 中水平分片的好方法是啥
】在postgresql中水平分片的好方法是啥【英文标题】：whatisagoodwaytohorizontalshardinpostgresql在postgresql中水平分片的好方法是什么【发布时间】：2010-11-0222:51:46【问题描述】：什么是postgresql中水平分片的好方法1.pgpool22.gridsql这是使用... 查看详情
在 iOS 中水平读取 UIWebView 中的 PDF
】在iOS中水平读取UIWebView中的PDF【英文标题】：PDFReadinginUIWebViewwithhorinzontallyiniOS【发布时间】：2014-05-2304:36:34【问题描述】：用于在iOS中水平读取UIWebView中的PDF文件。所以我写了以下内容以添加UIScrollView以水平滚动。UIScrollView*s... 查看详情
java示例代码_在javafx中水平增长进度条
java示例代码_在javafx中水平增长进度条 查看详情
如何在 UINavigationBar 中水平定位 backIndicatorImage
】如何在UINavigationBar中水平定位backIndicatorImage【英文标题】：HowtohorizontallypositionthebackIndicatorImageinUINavigationBar【发布时间】：2016-01-0416:26:44【问题描述】：我使用此代码将插图添加到导航栏的backIndicator图像。但是，这仅适用于... 查看详情
LibreOffice API/UNO：如何在编写器的表格单元格中水平右对齐文本
...】：2020-01-2814:16:04【问题描述】：我正在使用C++从另一个应用程序控制LibreOffice/OpenOffice，但如果您也知道java-bridge，我想您可以帮助我。所以基本 查看详情
在 SQL Server 中水平连接两个以上的表
】在SQLServer中水平连接两个以上的表【英文标题】：ConcatenatemorethantwotableshorizontallyinSQLServer【发布时间】：2015-02-2408:03:47【问题描述】：以下是架构+---------+---------+|EmployeeTable|+---------+---------+|EmpId|Name|+---------+---------+|1|John||2|Li 查看详情
在 matplotlib 中水平显示单选按钮
】在matplotlib中水平显示单选按钮【英文标题】：DisplayingRadiobuttonshorizontallyinmatplotlib【发布时间】：2019-08-0108:51:14【问题描述】：我正在使用matplotlib.widgets在我的小部件中创建单选按钮，即将出现的按钮垂直堆叠，我希望它们水... 查看详情
如何在 JavaScript 中水平翻转图像
】如何在JavaScript中水平翻转图像【英文标题】：HowtohorizontiallyflipaimageinJavaScript【发布时间】：2022-01-2211:30:48【问题描述】：我正在尝试翻转从网络摄像头流中捕获的图像。CSS中的网络摄像头view被翻转，但是当我拍摄快照时，它... 查看详情
停止视图在相对布局中水平重叠
】停止视图在相对布局中水平重叠【英文标题】：Stopviewsoverlappinghorizontallyinarelativelayout【发布时间】：2016-04-2815:57:40【问题描述】：作为日历的一部分，我有两个视图，一个日视图和一个事件视图。我希望我的事件以宽度填充... 查看详情