在特定 Header 下对齐 Python 破折号元素

Question

我是 Python Dash 的新手，我正在尝试创建一个下拉菜单很少的应用程序。到目前为止，我的 app.layout 如下所示：-

app.layout = html.Div([
    html.H1(children="Container Vulnerability Risk Rating Calculator", style={'color':'#00361c','text-align':'center'
          }),
    html.H2(children="Likelihood Factors", className="abc", style={
                        'backgroundColor':'darkslategray',
                        'color':'lightsteelblue',
                        'height':'25px',
                        'margin-left':'0px',
                        'text-align':'center',
                        'width':'20%',
                        'display':'inline-block'
               }),
    html.H2(children="Impact Factors", className="xyz", style={
                        'backgroundColor':'darkslategray',
                        'color':'lightsteelblue',
                        'height':'25px',
                        'margin-left':'10px',
                        'text-align':'center',
                        'width':'20%',
                        'display':'inline-block'
               }),
    html.Div(
            children="Hosting Environment",
            className="abc",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
    html.Div([
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Application in Build Stage", "value": "1"},
             {"label": "Application is in Production", "value": "2"},
             {"label": "Application is non-Internet facing", "value": "3"},
             {"label": "Application is Internet facing", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown'
            ),
        html.Div(id='dd-output-container')
        ], style={'width': '20%', 'display': 'inline-block'}),
    html.Div(
            children="Control Effectiveness",
            className="abc",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Remediation within 12 months", "value": "1"},
             {"label": "Remediation within 6 months", "value": "2"},
             {"label": "Remediation within 3 months", "value": "3"},
             {"label": "Remediation within 1 month", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown-temp'
            ),
        html.Div(id='dd-output-container-temp')
        ], style={'width': '20%'})
    ]),
    html.Div(
            children="Application Complexities",
            className="xyz",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
    html.Div([
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Application in Build Stage", "value": "1"},
             {"label": "Application is in Production", "value": "2"},
             {"label": "Application is non-Internet facing", "value": "3"},
             {"label": "Application is Internet facing", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown1'
            ),
        html.Div(id='dd-output-container1')
        ], style={'width': '20%', 'display': 'inline-block'}),
    html.Div(
            children="Application Criticality",
            className="xyz",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Remediation within 12 months", "value": "1"},
             {"label": "Remediation within 6 months", "value": "2"},
             {"label": "Remediation within 3 months", "value": "3"},
             {"label": "Remediation within 1 month", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown1-temp'
            ),
        html.Div(id='dd-output-container1-temp')
        ], style={'width': '20%'})
    ]),
])

Python 应用程序以以下方式呈现此内容：-

我需要应用绘制底部的两个下拉菜单，即“应用程序复杂性”和“应用程序关键性”，以显示在“影响因素”下 header。

如有任何帮助，我们将不胜感激。

Answer 1

我会为此使用 flexbox（很棒的指南 here）。像下面这样的东西应该会让你大部分都在那里。

html.Div([
  html.Div([
    html.Div(
            children="Hosting Environment",
            className="abc",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
    html.Div([
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Application in Build Stage", "value": "1"},
             {"label": "Application is in Production", "value": "2"},
             {"label": "Application is non-Internet facing", "value": "3"},
             {"label": "Application is Internet facing", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown'
            ),
        html.Div(id='dd-output-container')
        ], style={'width': '20%', 'display': 'inline-block'}),
    html.Div(
            children="Control Effectiveness",
            className="abc",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Remediation within 12 months", "value": "1"},
             {"label": "Remediation within 6 months", "value": "2"},
             {"label": "Remediation within 3 months", "value": "3"},
             {"label": "Remediation within 1 month", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown-temp'
            ),
        html.Div(id='dd-output-container-temp')
        ], style={'width': '20%'})
    ]),
  ]),
  html.Div([
    html.Div(
            children="Application Complexities",
            className="xyz",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
    html.Div([
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Application in Build Stage", "value": "1"},
             {"label": "Application is in Production", "value": "2"},
             {"label": "Application is non-Internet facing", "value": "3"},
             {"label": "Application is Internet facing", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown1'
            ),
        html.Div(id='dd-output-container1')
        ], style={'width': '20%', 'display': 'inline-block'}),
    html.Div(
            children="Application Criticality",
            className="xyz",
            style={"font-style": "italic", "font-weight": "bold"},
        ),
        html.Div([
            dcc.Dropdown(options=[
             {"label": "Remediation within 12 months", "value": "1"},
             {"label": "Remediation within 6 months", "value": "2"},
             {"label": "Remediation within 3 months", "value": "3"},
             {"label": "Remediation within 1 month", "value": "4"},          
             ],
             placeholder="Select an option",
             id='demo-dropdown1-temp'
            ),
        html.Div(id='dd-output-container1-temp')
        ], style={'width': '20%'})
    ]),
  ]),
], style=dict(display='flex')

基本上，您有一个带有 flex 显示属性的大盒子，其中包含两个盒子。这些框可以并排放置，它们的内容是您的文本和下拉组件。

在特定 Header 下对齐 Python 破折号元素

Align Python Dash element under a specific Header

html

css

python

plotly-dash