Plotly Dash：dcc.Upload 组件的左填充

Question

我正在使用 Dash 构建 Web 应用程序。我想让用户能够使用 dcc.Upload 组件上传文件。

我那块的代码如下：

html.Div([
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
        'margin-left' : '300px',
        'width' : '50%',
        'height' : '60px',
        'lineHeight' : '60px',
        'borderWidth' : '1px',
        'borderStyle' : 'dashed',
        'borderRadius' : '5px',
        'textAlign' : 'center',
        'margin' : '10px'
        },
        multiple=True
        ),
    html.Div(id='output-data-upload'),
    ]),

我正在尝试在显示“拖放或 Select 文件”的框上添加一些左填充。

在style字典中，'margin-left' : '300px'似乎没有作用。

我也试了marginLeft，也没用

在 dcc.Upload 组件上提供左填充的正确方法是什么？

Answer 1

您的代码的问题是 'margin-left': '300px' 被 'margin': '10px' 覆盖，这就是您看不到任何效果的原因。请注意，您可以一次指定所有边距。例如，设置 'margin': '10px 5px 3px 300px' 将添加 10px 的上边距、5px 的右边距、3px 的下边距和 300px 的左边距。

Plotly Dash：dcc.Upload 组件的左填充

Plotly Dash: Left padding for dcc.Upload component

python

plotly

plotly-dash