В разделе, который использует display: grid;
, я хочу переместить элемент (кнопку) из одного раздела сетки в другой.
<form>
<div class = "item-1">
<span>телефон</span>
<img src = "Line 4.svg" width = "327 px" height = "2 px">
<input type = "text" id = "phone">
</div>
<div class = "item-2">
<span>имя</span>
<img src = "Line 4.svg" width = "327 px" height = "2 px">
<input type = "text" id = "name">
</div>
<div class = "item-3">
<span>класс</span>
<img src = "Line 4.svg" width = "327 px" height = "2 px">
<input type = "text" id = "class">
</div>
<div class = "application-button">
<input type = "button" id = "send-button" value = "Оставить заявку">
</div>
</form>
Я ничего не пробовал, я просто не знаю, как это сделать.
Вы можете начать с поиска grid-column-start и grid-column-end.
Теперь у вас есть такая кнопка:
#send-button {
grid-column-start: 1;
grid-column-end: 2;
}
и вам просто нужно изменить его на
grid-column-start: 3;
grid-column-end: 4;
(конечно, это просто статическое размещение. Как сказал Зет, если вы хотите изменить его динамически, вам понадобится javascript или какая-то библиотека и т. д..)
Этого невозможно достичь без использования JavaScript (или какого-либо другого способа динамической работы с контентом после его отображения. HTML (то, что вы опубликовали) является статическим. Таким образом, перемещение элементов вокруг разметки невозможно сделать с помощью HTML. Хороший вопрос: когда вам нужно переместить кнопку?... когда кто-то нажимает кнопку?