如何在 plotly dash 中设置按钮的样式以使其看起来干净并与其他组件更加一致答案

【问题标题】：How to style a button in plotly dash to look clean and more aligned with other components如何在 plotly dash 中设置按钮的样式以使其看起来干净并与其他组件更加一致
【发布时间】：2021-11-16 01:51:15
【问题描述】：

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

额外：（我从未使用过 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'})
    ])

【问题讨论】：

标签： python html css plotly-dash

【解决方案1】：

您可以尝试将verticalAlign 更改为style。

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

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

【讨论】：