Question

我正在尝试将UPDATE和DELETE按钮移到同一行。它来了，但是这两个按钮之间没有空格。

              <Button className={clsx(classes.button)}
                type="submit"
                variant="contained">
                {'Update'}
              </Button>

              <Button className={clsx(classes.button)}
                type="submit"
                variant="contained">
                {'Delete'}
              </Button>   
            </div>

我该如何解决？

Answer 1

你好Malsha Madushani，

如果要在按钮之间创建空格，可以为一个按钮设置边距属性。

请参见以下示例：https://jsfiddle.net/eb94v8fq/

/*------------HTML------------*/
<html>
    <head>
        <style>
            /*-------------CSS--------*/
            #buttons{
                background-color:red;
            }
    
            #updateBtn{
                margin-right: 100px;
            }
        </style>
    </head>
    <body>
        <div id="buttons">
            <button id="updateBtn"
                    className={clsx(classes.button)}
                    type="submit"
                    variant="contained">
            {'Update'}
            </button>
            <button id="deleteBtn"
                    className={clsx(classes.button)}
                    type="submit"
                    variant="contained">
            {'Delete'}
            </button>
        </div>
    </body>
</html>

您需要为第一个按钮赋予样式属性margin-right：（xx）px;

[按钮] [按钮]

将在两个按钮之间创建10px的空间。

结果：

[button] ---空格（以像素为单位）--- [button]

Answer 2

您需要带有 display="flex" 和 justifyContent="space-between" 的 Material UI Box 组件。这会在元素之间水平增加空间。

<Box display="flex" justifyContent="space-between">
  <Button className={clsx(classes.button)}
            type="submit"
            variant="contained">
            {'Update'}
          </Button>

          <Button className={clsx(classes.button)}
            type="submit"
            variant="contained">
            {'Delete'}
          </Button>   
</Box>

如何在材质ui中的两个按钮之间留出空格？

2 个答案: