图：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'),
    ]),

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

在Style词典中，'margin-left' : '300px'似乎没有任何作用。

我也尝试过marginLeft，该方法也不起作用。

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

提前感谢！

Answer 1

您的代码的问题是'margin-left': '300px'被'margin': '10px'覆盖，这就是为什么看不到效果的原因。请注意，您可以一次指定所有边距。例如，设置'margin': '10px 5px 3px 300px'将添加10px的上边距，5px的右边距，3px的下边距和300px的左边距。 CSS文档中对此进行了解释：https://www.w3schools.com/css/css_margin.asp。