Попытка создать табличный макет не будет работать с CSS

Question

Я пытаюсь воссоздать вид таблицы в форме контакта.

Вот текущая форма: http://www.radonsystems.net/contact-us

и вот как выглядит незавершенное производство

http://www.radonsystems.net/newsite/?do=contact-us

Как вы видите, существует проблема со второй формой - я просто не знаю, как ее исправить.

Есть идеи, что я делаю не так?

Стиль (CSS) для этой части скопирован почти на 100%, только я изменил шрифт, но остался в том же семействе.

Answer 1

ОК - основная проблема, с которой вы столкнулись, заключается в том, что нет HTML-элемента, объединяющего ваши входные данные и метки (так же, как строки таблицы группируют ячейки таблицы вместе). Если вы добавите элемент группировки, это будет иметь большое значение для решения проблем с макетом.

Хороший способ предоставить эту структуру в HTML - это использовать неупорядоченный список (так как форма представляет собой, семантически, список деталей, которые должен предоставить пользователь. Сгруппированная структура может выглядеть следующим образом:

<ul class="formStructure">
    <li>
      <label for="field1">Field 1:</label>
      <input type="text" id="field1" name="field1"/>
    </li>
    <li>
      <label for="field1">Field 1:</label>
      <input type="text" id="field1" name="field1"/>
    </li>
</ul>

Это семантически и визуально объединит метки и их поля. Вам нужно добавить CSS, чтобы отключить стиль списка (чтобы вы не видели маркеры), установить ширину и поля на ярлыках и т. Д.

Кроме того, вы можете улучшить свои навыки работы с HTML при размещении форм. Вам не хватает элементов <fieldset> и <legend>, которые являются частью хороших (и действительных) HTML-форм.

Answer 2

Попробуйте float: left; вместо float: right; на вашем contact-input Мое тестирование все правильно выровняет.

до

.contact-input 
{
    border:1px dashed black;
    display:table-cell;
    float:right;
    width:70%;
}

и после

.contact-input 
{
    border:1px dashed black;
    display:table-cell;
    float:left;
    width:70%;
}