Python 水平对齐仪表板核心部件

我想水平对齐两个下拉菜单和一个日期选择器。但使用以下代码：

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

style_dict = dict(width='100%',
                  border='1.5px black solid',
                  height='50px',
                  textAlign='center',
                  fontSize=25)

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    # placeholder
    html.Div(style={'width': '2%', 'display': 'inline-block'}),

    html.Div(
        dcc.Dropdown(
            id = 'start_hour',
            options = [{'label': i, 'value': i} for i in list(range(0,24))],
            style=style_dict,
    ), style={'width': '20%', 'display': 'inline-block'}),

    # placeholder
    html.Div(style={'width': '2%', 'display': 'inline-block'}),
              
    html.Div(                         
    dcc.DatePickerRange(
        id='date_picker_range',
        style=style_dict
    ), style={'width': '14%', 'display': 'inline-block', 'fontSize': 20}),

    # placeholder
    html.Div(style={'width': '2%', 'display': 'inline-block'}),
    
    html.Div(
        dcc.Dropdown(
            id = 'end_hour',
            options = [{'label': i, 'value': i} for i in list(range(0,24))],            
            style=style_dict                
    ), style={'width': '20%', 'display': 'inline-block'}),        

])

if __name__ == '__main__':
    app.run_server(debug=False, use_reloader=False)

我得到了这个布局：

如果放大，我会看到：

无论我如何放大或缩小，是否可以强制组件在顶部边缘对齐

---

作为浏览器，我使用Firefox。

我遇到了一个与您描述的问题类似的问题。我正在创建一个如下所示的仪表板：

如图所示，我的dcc组件及其标题没有正确对齐。我尝试添加样式参数

verticalAlign

，结果正如我所期望的那样。以下是添加该样式参数后仪表板的外观：

我正在附加我的仪表板布局代码，以便您可以看到我将提到的参数放置在何处：

## Dashboard layout
app.layout = html.Div( ## Master div
    [
        html.Div( ## Dashboard title
            [
                dcc.Markdown(dash_title)
            ]
        ),
        html.Div( ## Select menus
            [
                html.Div( ## Stock select
                    [
                        dcc.Markdown(dash_stock_sel),
                        dcc.Dropdown(
                            id="select_stock",
                            options=[{"label": cmp, "value": tickers_base[cmp]["symbol"]} for cmp in tickers_base],
                            value="TSLA"
                        )
                    ],
                    style={
                        "display": "inline-block",
                        "width": "20%"
                    }
                ),
                html.Div( ## Date select dcc components
                    [
                        dcc.Markdown(dash_date_sel),
                        dcc.DatePickerRange(
                            id="select_dates",
                            min_date_allowed=date(2015, 1, 1),
                            max_date_allowed=date.today(),
                            initial_visible_month=date(2015, 1, 1),
                            end_date=date.today()
                        )
                    ],
                    style={
                        "display": "inline-block",
                        "width": "30%",
                        "margin-left": "20px",
                        "verticalAlign": "top"
                    }
                ),
            ]
        ),
        html.Div( ## Stock prices graph
            [
                dcc.Graph(
                    id="cstock_graph",
                    figure=stock_graph(def_company, datareader_api, def_start, def_end)
                )
            ]
        )
    ]
)

---

我希望这个答案有帮助

尝试将

'vertical-align'：'top'

添加到样式字典中。这很有效，很简单……）你可以加一个答案，这样我就可以接受了。