макет столбца для HTML-формы с использованием CSS

0

Мне нужно создать горизонтальную форму, в которой каждое поле появляется под его меткой и формирует в основном формат столбцов, где метка и поле появляются в одном столбце. Я попытался использовать его с табличным форматом, но он не подходит для динамических форм, где я не знаю количество полей и ярлыков, которые будут присутствовать в форме.

Я искал и нашел столбцы или строки HTML для макета формы? Первый подход дает горизонтальную компоновку, но поле и метка не отображаются в формате столбцов.

.field-row {
 overflow: hidden;
}
.field-row span {
display: block;
width: 30%;
float: left;
}
.field-row .field-container {
 width: 70%;
 float: left;
}

<div class="field-row">
<span>Field 1</span>
<span>Field 2</span>
<span>Field 3</span>
<div class="field-container">
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</div>

jsFiddle для кода выше.

Можно ли даже достичь этого просто divs или table - единственный способ?

[Редактировать] Извините, за отсутствие этого в оригинальном вопросе.

Строка метки должна иметь границу вокруг нее, чтобы она отображалась как одна строка. Именно по этой причине я сохранил все метки в одном div, чтобы этот стиль можно было применить к div. Обновлен jsFiddle для ожидаемого результата

http://jsfiddle.net/aBeF8/7/

  • 0
    Вы хотите этот тип jsfiddle.net/aBeF8/1 ???
  • 0
    Нет, это вертикальная форма. Мне нужно, чтобы моя форма отображалась горизонтально, каждое поле появляется под меткой
Показать ещё 5 комментариев
Теги:
forms

4 ответа

0
Лучший ответ

Итак, я добавлю новый ответ вместо того, чтобы изменить существующий, потому что ваши требования были изменены или уточнены, поскольку:

  • ваш HTML-код генерируется, поэтому вы не можете его изменять.
  • вам нужна граница вокруг строки ярлыков.

См. Ответ для обоих: http://jsfiddle.net/aBeF8/13/

Трудная часть заключается в том, что вам необходимо установить ширину метки и ввода одновременно, но для ввода текста по умолчанию используется граница 1px, которая включает в себя ширину. Чтобы работать над этим, я добавил скрытую рамку к меткам.

.field-row span{
border:1px solid #fff;
}
Поделиться
  • 0
    это именно то, что мне нужно, спасибо
0

Вы хотите что-то подобное?

.field {
   float: left;
 }

http://jsfiddle.net/aBeF8/2/

Ваш HTML-код не учитывает float и логику HTML-документа: вы должны перегруппировать элементы той же информационной единицы (здесь: метка и ее ввод).

Поделиться
0

Использование столбцов css может быть самым простым способом.

См. Fiddle: http://jsfiddle.net/aBeF8/8/

.field-row {
    -moz-column-width: 128px;
    -webkit-column-width: 128px;
     -column-width: 128px;
    -webkit-column-gap: 0px;
    column-gap: 0px;
}
label { display: block; border-bottom: 1px solid gray; }
input {
    width: 90%;
    display:inline-block;
}

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

Другой вариант (согласно вашему комментарию выше на границах): http://jsfiddle.net/aBeF8/10/

И это использует column-rule чтобы придать ему вид таблицы: http://jsfiddle.net/aBeF8/11/

Кроме: Вы должны использовать label с for вместо span для этикеток.

Поделиться
  • 0
    Форма динамически генерируется в корпоративном приложении. Я не могу изменить, чтобы использовать метку вместо диапазона и не возможно использовать для также.
  • 0
    @Neel: в этом случае все в порядке. просто замените метку в CSS на span . я обновил ответ, чтобы включить еще одну скрипку с границами.
0

Вот html-код.

  <div class="field-row">
    <div class="field-container">
         <span>Field 1</span>
        <input type="text"/>
    </div>

    <div class="field-container">
         <span>Field 2</span>
        <input type="text"/>
    </div>

    <div class="field-container">
         <span>Field 3</span>
        <input type="text"/>
    </div>
</div>

Вот css

.field-row {
  overflow: hidden;
}

.field-row span {
  display: block;
  width: 30%;
  float: left;
}

.field-row .field-container {
  width: 30%;
  float: left;
}
.field-container span {
border: 1px solid #ccc;
display: block;
width: 93%;
}

См. Демо- ссылку.

См. Мою обновленную демоверсию

Поделиться
  • 0
    Это отвечает на исходный вопрос, но не позволяет границу в строке метки.
  • 0
    Пожалуйста, смотрите обновленную демонстрационную ссылку jsfiddle.net/aBeF8/12

Ещё вопросы

Сообщество Overcoder
Наверх
Меню