Блог

Главная - Вопросы по программированию - Как оформить кнопку в черточке, чтобы она выглядела чистой и более согласованной с другими компонентами

Как оформить кнопку в черточке, чтобы она выглядела чистой и более согласованной с другими компонентами

#python #html #css #plotly-dash

Вопрос:

Как мне переместить кнопку «Показать таблицу», чтобы она хорошо соответствовала моим фильтрам? Как вы можете видеть, это совсем не привлекательно. Он должен немного подняться. Какой метод стиля 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'})
    ])

Ответ №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'}
Метки: ,