-2

введите сюда описание изображения

input[type="text"] {
  width: 220px;
  height: 30px;
  border-radius: 5px;
}

.user-adres,
adres1 {
  width: 440px;
}

.user-family {
  position: absolute;
  left: 0px;
  margin: 10px;
  top: 10px;
}

.user-name {
  position: absolute;
  left: 220px;
  margin: 10px;
  top: 10px;
}

.user-fathername {
  position: absolute;
  left: 440px;
  margin: 10px;
  top: 10px;
}

.user-adres {
  position: absolute;
  top: 50px;
  margin: 10px;
}

.user-mail {
  position: absolute;
  top: 50px;
  left: 440px;
  margin: 10px;
}

Не могу сооброзить как разделить поля форм и добавить им отступы. margin не работает

3
  • На фото пример как должно быть 29 мар 2019 в 12:56
  • добавьте рабочий фрагмент кода (кнопка < >)
    – Arbery
    29 мар 2019 в 13:00
  • input[type="text"] { width: 220px; height: 30px; border-radius: 5px; } .user-adres, adres1 { width: 440px; } .user-family { position: absolute; left: 0px; margin: 10px; top: 10px; } .user-name { position: absolute; left: 220px; margin: 10px; top: 10px; } .user-fathername { position: absolute; left: 440px; margin: 10px; top: 10px; } .user-adres { position: absolute; top: 50px; margin: 10px; } .user-mail { position: absolute; top: 50px; left: 440px; margin: 10px; } 29 мар 2019 в 13:08

2 ответа 2

0

И не сработают маргины, поскольку у вас абсолютное позиционирование. Как бы вы их не задавали, браузер отрисует инпуты по заданным вами координатам.

Решений несколько:

  1. Изменить координаты инпутов так, чтобы одни отстояли дальше от других. CSS-свойства top, left
  2. Избавиться от позиционирования вообще и использовать нормальную (хоть и не модно это) таблицу, задав ячейкам паддинги. Для поля "адрес" использовать сдвоенную ячейку с атрибутом colspan="2".
  3. Использовать Grid.
0

Используйте для разметки формы css-grid, вот ваш пример:

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#adress {
  grid-column: 1/3;
}

#container input {
  margin: 5px;
}
<div id="container">
  <input>
  <input>
  <input>
  <input id="adress">
  <input>
  <input>
  <input>
  <input>
</div>

Как видите тут margin работает!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.