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')
    ), ],
)

这是结果的屏幕截图：