Проблема с полями CSS

Question

Я новичок в CSS, поэтому, пожалуйста, потерпите меня. У меня есть эта форма, которую я пытаюсь стилизовать. Все работает хорошо, кроме метки подтверждения, которая находится в div. Я хочу, чтобы между div.field было некоторое пространство, и хотя это работает для всех элементов ввода, оно не работает для сообщения метки, которое находится внизу. Я пытался увеличить маржу, но безрезультатно. Я бы хотел, чтобы этот элемент был расположен в центре.

Используя аддон для веб-разработчиков Firefox, он показывает мне, что ширина и высота тега div.field метки, в частности, составляет 284 пикселей и 209 пикселей соответственно. Почему так, когда я так не настроил?

Вы можете просмотреть код в реальном времени на jsfiddle: http://www.jsfiddle.net/yMHJY/

Answer 1

Решение простое, правда.Добавьте поле margin к родительскому элементу элемента label и добавьте overflow: hidden к селектору div#contact div .field.

---

Однако могу ли я просто сказать, что код может быть переписан для многихлучшая эффективность и семантическая корректность.Например, я бы добавил последний массаж в теге p, а не label в div.Кроме того, я бы поместил каждый элемент input в неупорядоченный список ul вместо div s.У вас также есть много ненужных float с, и br в конце каждого input совершенно не нужен.Да, и если вы как-то не встраиваете Calluna, не используйте его - придерживайтесь безопасных веб-шрифтов (и если это так, вам все равно нужно предложить альтернативу, в браузере пользователя его не поддерживает, а также дать браузеручто-то для отображения во время загрузки шрифта).

Редактировать

Исправлена ​​нагрузка на тебя, мне платят за такого рода вещи :) Просто в следующий раз придерживайтесь лучшего HTML и CSS.

http://www.jsfiddle.net/SNrtA/

Answer 2

В центр вы можете добавить родительский контейнер

<div id="parent">
    <label id="label">Your Message Has Been Sent</label>
</div>


div#parent {
 text-align:center;
}

или добавьте id к вашему исходному родительскому div, чтобы нацелиться на него выше css

Что касается поля, у вас, похоже, есть проблема с плавающей точкой: оставлено в

div # contact div input [type = text] class. Вы должны очистить это, поскольку это может вызвать проблемы с маржой. Попробуйте удалить это и изменить ваши стили. Почему вы пропускаете входные данные слева?