Как сделать пробелы между двумя кнопками в пользовательском интерфейсе материала? - PullRequest
Новая
       4

Как сделать пробелы между двумя кнопками в пользовательском интерфейсе материала?

2 голосов
/ 09 июля 2020

Я пытаюсь перенести кнопки 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>

Как я могу это исправить?

1 Ответ

1 голос
/ 09 июля 2020

Привет, Мальша Мадушани,

если вы хотите создать пробел между кнопками, вы можете присвоить одной кнопке атрибут поля.

См. Этот пример: 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;

[button] [button]

создаст 10 пикселей между двумя кнопками.

результат:

[кнопка] --- пробел (в пикселях) --- [кнопка]

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...