Стиль CSS для позиционирования входов

Я хочу сделать часть страницы, где у меня есть пять input[type=text], но мне нужно поместить их определенным образом, как на этой картинке:

Я попытался что-то сделать с свойством display, но это не сработало.

Кроме того, я не хочу использовать грубые ввода left и top свойств.

1 ответ

Похоже, вы просто хотите, чтобы ваша форма была сосредоточена в элементе. Центрирование может быть выполнено легко, так как элементы ввода по умолчанию display: inline-block все, что вам нужно, - для их контейнера иметь центр text-align чтобы они text-align.

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

HTML

<div>
 <div> </div>
 <div> </div>
 <textarea></div>
</code>

CSS

<code>.centerForm {
 text-align: center;
}

.centerForm-row {
 margin: 30px 0;
}

.centerForm-row input {
 margin-left: 40px;
}

.centerForm-row input:first-child {
 margin-left: 0;
}</code>

здесь скрипка

Извините, если это не то, что вы хотели, но можете комментировать.

РЕДАКТИРОВАТЬ:

Поэтому, чтобы решить вашу проблему в комментариях к этой статье, вы можете сделать одну из двух вещей. Нажмите A). и B). чтобы получить полноэкранные демонстрации отдельных проектов.

А). Сделайте свой контейнер min-width. Это заставляет горизонтальную полосу прокрутки с меньшей шириной, но сохраняет ваши элементы в одном стиле.

Б). Просто позвольте вводу идти по двум строкам, но используйте медиа-запрос, чтобы убедиться, что он выглядит так, будто он должен быть одним столбцом.

А).

Вот добавленный css для A). (HTML-код остался прежним для обоих примеров.)

<code>.centerForm {
 text-align: center; /*This was here before*/
 min-width: 400px; /*This is the only added style*/
}</code>

Вот редактируемый JsFiddle of A).

Б).

Вот добавленный css для B).

<code>@media (max-width: 400px) { /*applies when screen is less than 400px*/
 .centerForm-row input {
 display: block; /*this forces it on to multiple lines preemptively*/
 margin: 0 auto; /*this centers display block elements*/
 margin-top: 15px; /*this is just for style*/
 }
 .centerForm-row input:first-child {
 margin-top: 0; /*just for style*/
 margin: 0 auto; /*must be here to override margin-left: 0 from the rule .centerForm-row input:first-child above*/
 }

}</code>

Вот редактируемый JsFiddle B).

Просто повторите попытку, если у вас есть еще вопросы. Надеюсь, это помогло. :)

licensed under cc by-sa 3.0 with attribution.