Dash 中的布局和下拉菜單 - Python

Question

我似乎無法正確獲得下拉菜單框的布局。 基本上我希望下拉框位於他們匹配問題的右側並在同一行上。

有人可以幫忙嗎？

我嘗試了 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()

下拉框出現在完全不同的行中。 我希望下拉框與要回答的各自問題水平對齊。

Answer 1

我最喜歡的造型技巧 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')
    ), ],
)

這是結果的屏幕截圖：