Можно ли создать эти три разных макета с помощью CSS, используя одну и ту же базовую структуру HTML?

Question

Мне нужно создать список имен-значений в HTML. (На самом деле это элементы формы, label и input)

Как создать этот вывод, чтобы веб-дизайнер мог создавать следующие три различных макета, не изменяя исходную структуру HTML?

Вариант 1:

Name One:
Value One

Name Two:
Value Two

Вариант 2:

Name One:         Value One
Longer Name Two:  Value Two

Вариант 3:

       Name One:  Value One
Longer Name Two:  Value Two

Создание выходных данных для одного варианта 2 и 3 было бы тривиально, я бы просто использовал таблицу и выравнивание изменилось с помощью CSS.

Но как мне это сделать, если я хочу разрешить все три варианта? Как будет выглядеть код CSS? Это вообще возможно?

Answer 1

Я бы использовал список DL, например:

<dl>
   <dt>Name One:</dt>
   <dd>Value One</dd>
   <dt>Name Two:</dt>
   <dd>Value Two</dd>
   <dt>Name Three:</dt>
   <dd>Value Three</dd>
</dl>

и стиль с использованием (примерно):

Пример 1:

dl dt { }
dl dd { margin: 0px; padding: 0px; }

Пример 2:

dl dt { display: block; float: left; width: 150px; clear:left; }
dl dd { display: block; float: left; }

Пример 3:

dl dt {display: block; float: left; width: 150px; text-align: right; clear:left; }
dl dd {display: block; float: left; }

... и это семантика.

Answer 2

Это возможно, и вы можете найти множество замечательных примеров (которые вы можете скопировать!) На CSS Zen Garden .

Answer 3

HTML:

<div class="container">
   <label for="Name" class="label">Name:</label>
   <input id="Name" name="Name" />
</div>
<div class="container">
   <label for="LongName" class="label">Long Name:</label>
   <input id="LongName" name="LongName" />
</div>

CSS1:

.container {}
.label
{
   display: block;
}

CSS2:

.container
{
   margin-left: 12em;
}

.label
{
   float: left;
   margin-left: -12em;
}

CSS3:

.container
{
    margin-left: 8em;
}

.label
{
    float: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
}

Answer 4

Я создаю один CSS Form Framework под названием Formy . Все 3 варианта включены без изменения HTML.

Примеры:

1. * 1009 Вариант 1 *
2. Variant2
3. Variant3

Answer 5

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

Это особенно проблема, когда данные, отображаемые в первом столбце, являются переменными (т. Е. Не метками) или поступают на разных языках.

Если ни одна из этих проблем не является для вас проблемой, то решение с использованием DL из Program.X должно сделать это.