Webform Layout: таблица или что-то еще - PullRequest
Новая
       25

Webform Layout: таблица или что-то еще

0 голосов
/ 21 февраля 2009

Мне нужно создать веб-форму, которая будет выглядеть примерно так 

column   column  -   column   column      column column   -   column column
label:   input   -   label:   input 
label:   input   -   label:   input   -   label: input
label:   input   -   label:   input
label:   input
label:   input   -   label:   input
label:   input   -   label:   input   -   label: input   -    input: label

и т.д ..

Теперь, что было бы лучшим способом сделать это? Я пытался сделать это с помощью css, но я терпел неудачу снова и снова.

Должен ли я просто использовать таблицы для этого или есть простой способ сделать это с помощью CSS?

Ответы [ 3 ]

4 голосов
/ 21 февраля 2009

Просто сделай это со столами. Таблицы хороши для табличных данных, например, со столбцами и строками ... как в вашем случае!

1 голос
/ 25 февраля 2009

Как насчет этого? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
    .column {
      width: 200px;
      float: left;
    }

    .column label {
      clear: both;
      float: left;
      margin-right: 10px;
      margin-bottom: 5px;
      text-align: right;
      width: 75px;
    }

    .column input {
      float: left;
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="column">
    <label>Label 1:</label> <input type="text" />
    <label>Label 2:</label> <input type="text" />
    <label>Label 3:</label> <input type="text" />
    <label>Label 4:</label> <input type="text" />
  </div>

  <div class="column">
    <label>Label 5:</label> <input type="text" />
    <label>Label 6:</label> <input type="text" />
    <label>Label 7:</label> <input type="text" />
    <label>Label 8:</label> <input type="text" />
  </div>
</body>
</html>

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

1 голос
/ 21 февраля 2009

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

Однако я предполагаю, что вам нужны какие-то столбцы. У вас есть несколько возможностей. Наиболее негибким является абсолютно позиционирование элементов управления (разметка).

Вы можете использовать таблицы, которые были бы наиболее простыми. Однако пуристы утверждают, что таблицы предназначены для данных, а не для макета.

Вы также можете оставить серию DIV с плавающей точкой для представления столбцов: один столбец для метки, один для ввода, третий для меток, четвертый для ввода и т. Д.

РЕДАКТИРОВАТЬ: Если вы не беспокоитесь о том, что метки располагаются вертикально с метками, а входы располагаются вертикально с входами, просто поместите одну пару метка + вход в каждый столбец, какой бы метод вы ни выбрали выше.

...