python - Dash 中的布局和下拉菜单 - Python
问题描述
我似乎无法正确获得下拉菜单框的布局。基本上我希望下拉框位于他们匹配问题的右侧并且在同一行。
有人可以帮忙吗?
我尝试了 style={'display': 'inline-block', 'width:'X%'} 和 className = 'X columns' 的多种组合,但没有成功。
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_auth
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.Div(
[
html.Div(
[
html.H6("""Select your current industry""",
style={'textAlign': 'right', 'font-weight':'bold', 'margin-left': '0em', 'margin-right': '2em', 'display': 'inline-block', 'width': '40%'})
],
),
dcc.Dropdown(
id = 'business_area_dropdown',
options=[
{'label': 'Academia', 'value': 'academia'},
{'label': 'Energy', 'value': 'energy'},
{'label': 'Research', 'value': 'research'}
],
placeholder="Select Business Area",
style = dict(
width = '40%',
display = 'inline-block',
verticalAlign = "middle"
)
)
],
className='row'
),
html.Div(
[
html.Div(
[
html.H6("""Are you happy where you are?""",
style={'textAlign': 'right', 'font-weight':'bold', 'margin-left': '0em', 'margin-right': '2em', 'display': 'inline-block', 'width': '40%'})
],
),
dcc.Dropdown(
id = 'search_preference',
options=[
{'label': 'Yes', 'value': 'yes'},
{'label': 'No', 'value': 'no'}
],
placeholder="Select Answer",
style = dict(
width = '40%',
display = 'inline-block',
verticalAlign = "middle"
)
)
],
className='row'
),],
style={'display': 'inline-block', 'backgroundColor': '#fff7dd', 'width': '99%'}
)
if __name__ == '__main__':
app.run_server()
下拉框出现在完全不同的行中。我希望下拉框与要回答的各自问题水平对齐。
解决方案
我最喜欢的造型技巧 Flexbox 就是我将如何解决这个问题的方法。
app.layout = html.Div([
html.Div(
[
html.Div(
[
html.H6("""Select your current industry""",
style={'margin-right': '2em'})
],
),
dcc.Dropdown(
id='business_area_dropdown',
options=[
{'label': 'Academia', 'value': 'academia'},
{'label': 'Energy', 'value': 'energy'},
{'label': 'Research', 'value': 'research'}
],
placeholder="Select Business Area",
style=dict(
width='40%',
verticalAlign="middle"
)
)
],
style=dict(display='flex')
),
html.Div(
[
html.Div(
[
html.H6("""Are you happy where you are?""",
style={'margin-right': '2em'})
],
),
dcc.Dropdown(
id='search_preference',
options=[
{'label': 'Yes', 'value': 'yes'},
{'label': 'No', 'value': 'no'}
],
placeholder="Select Answer",
style=dict(
width='40%',
display='inline-block',
verticalAlign="middle"
)
)
],
style=dict(display='flex')
), ],
)
这是结果的屏幕截图:
推荐阅读
- python - Django 将图像路径保存到数据库
- javascript - Firebase 云函数嵌套侦听器
- ruby-on-rails - 我不能用 Ruby 发出 ajax 请求
- python - 如何根据条件在Python中合并数据框中的两个连续记录
- python - Django 3 模板日期标签不返回任何内容
- javascript - 无法读取未定义的属性“findOne” - Vue.js、Apollo Server、GraphQL 错误
- sql - 如何从自定义格式的日期列中选择基于特定月份的 SQL Server 记录
- javascript - 如果您不指定依赖关系,那么 useEffect() 有什么意义
- clojure - 棱柱形/模式需要关键依赖?
- android - 由于 mapping.txt,uploadCrashlyticsMappingFile 任务失败?