如何在 plotly dash 中设置按钮样式以使其看起来干净并与其他组件更对齐

Question

如何移动我的按钮“显示 table”，使其与我的过滤器很好地对齐？如您所见，这根本没有吸引力。它应该上升一点。我可以使用什么 css 风格的方法？我怎样才能添加阴影并使外观更干净。

Extra：（我从未使用过 css）是否有某种类型的网站可以测试不同的 css 功能以查看影响？

html.Div([
    html.Div([
        dcc.Dropdown(
            id='sim-filter',
            style={'font-size': '12px', 'width': '90px', 'display': 'inline-block', 'margin-right': '5px'}
        ),
        dcc.Dropdown(
            id='event-filter',
            style={'font-size': '12px', 'width': '240px', 'display': 'inline-block', 'margin-right': '5px'}
        ),
        dcc.Dropdown(
            id='time-filter',
            style={'font-size': '12px', 'width': '180px', 'display': 'inline-block', 'margin-right': '5px'}
        ),
        html.Button(id='my-button', n_clicks=0, children="Show table",
                    style={'font-size': '12px', 'width': '140px', 'display': 'inline-block', 'margin-bottom': '10px', 'margin-right': '5px', 'height':'25px'})
    ])

Answer 1

您可以尝试在 style 中更改 verticalAlign。

例如，您将 'height':'37px', 'verticalAlign': 'top' 添加到按钮的样式中：

style={'font-size': '12px', 'width': '140px', 'display': 'inline-block', 'margin-bottom': '10px', 'margin-right': '5px', 'height':'37px', 'verticalAlign': 'top'}

如何在 plotly dash 中设置按钮样式以使其看起来干净并与其他组件更对齐

How to style a button in plotly dash to look clean and more aligned with other components

html

css

python

plotly-dash