Как бы вы достигли этого макета на основе таблицы, используя CSS вместо таблиц HTML? - PullRequest
Новая
       14

Как бы вы достигли этого макета на основе таблицы, используя CSS вместо таблиц HTML?

8 голосов
/ 21 сентября 2008

Я хочу, чтобы на экране появилась следующая раскладка: 

FieldName 1             [Field input 1]
FieldName 2 is longer   [Field input 2]
    .                         .
    .                         .
FieldName N             [Field input N]

Требования:

  • Имена полей и входы полей должны совпадать по левым краям
  • Оба столбца должны динамически изменяться в соответствии с их содержанием
  • Должен работать кросс-браузер

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

Ответы [ 7 ]

11 голосов
/ 21 сентября 2008

Я бы не стал, я бы использовал стол. Это классический пример табличного макета - именно для таких таблиц и вещей предполагается использовать .

5 голосов
/ 21 сентября 2008

Я думаю, что в большинстве ответов не хватает того, что первоначальный спрашивающий хотел, чтобы ширина столбцов зависела от ширины содержимого. Я считаю, что единственный способ сделать это с помощью чистого CSS - это использовать display: table, display: table-row и display: table-cell, но это не поддерживается IE. Но я не уверен, что это свойство является желательным, я считаю, что создание широких столбцов из-за одного длинного имени поля делает макет менее эстетичным и более сложным в использовании. Свернутые строки, на мой взгляд, хороши, поэтому я думаю, что ответы, которые я только что предложил, были неправильными, - это, вероятно, верный путь.

Пример Роберта идеален, но если вам действительно нужно использовать таблицы, я думаю, вы можете сделать его немного более "семантическим", используя <th> для имен полей. Я не уверен в этом, поэтому, пожалуйста, кто-нибудь поправит меня, если я ошибаюсь. 

<table>
    <tr><th scope="row"><label for="field1">FieldName 1</label></th>
        <td><input id="field1" name="field1"></td></tr>
    <tr><th scope="row"><label for="field2">FieldName 2 is longer</label></th>
        <td><input id="field2" name="field2"></td></tr>
    <!-- ....... -->
</table>

Обновление: я не следил за этим внимательно, но IE8, очевидно, поддерживает таблицы CSS, поэтому некоторые предлагают нам начать их использовать. Есть статья о 24 путях , которая содержит соответствующий пример в конце.

3 голосов
/ 21 сентября 2008

лучше все же использовать список 

     <fieldset class="classname">
        <ul>
            <li>
                <label>Title:</label>
                <input type="text" name="title" value="" />
            </li>
        </ul>
     </fieldset>

установите ширину тегов li, достаточную для метки и ввода, и поместите метку влево.

также для достижения этой таблицы, подобной блоку с таблицами, вы можете установить ширину метки равной наибольшему имени поля, форсирующему все метки, или расширить ее.

[править] Это хорошее чтение для списка отдельно

2 голосов
/ 03 октября 2008

Эта разметка и CSS примерно достигают ваших заявленных целей в соответствии с ограничениями для этого вопроса ...

Предложение 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>My Form</title>
    <style type="text/css">
        #frm1 div {float: left;}
        #frm1 div.go {clear: both; }
        #frm1 label, #frm1 input { float: left; clear: left; }
    </style>
</head>
<body>
    <form id="frm1" action="#" method="post">
        <fieldset>
            <legend>Section One</legend>
            <div>
               <label for="field1">Name</label>
               <label for="field2">Address, City, State, Zip</label>
               <label for="field3">Country</label>
            </div>
            <div>
               <input type="text" id="field1" size="15" />
               <input type="text" id="field2" size="20" />
               <input type="text" id="field3" size="10" />
            </div>
            <div class="go">
                <input type="submit" value="Go" />
            </div>
        </fieldset>
    </form>
</body>
</html>

Достоинства

... но я бы не рекомендовал его использовать. Проблемы с этим решением

  1. очень раздражающая обертка для всей колонки при ширине тощего браузера
  2. отделяет метки от связанных полей ввода в разметке

Решение, приведенное выше, должно быть (я не проверял это) доступным, потому что программы чтения с экрана, как я читал, хорошо справляются с использованием атрибута for="" в привязке меток к полям ввода. Так что визуально и доступно это работает, но вам может не понравиться перечислять все ваши ярлыки отдельно от полей ввода.

Заключение

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

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

2 голосов
/ 21 сентября 2008

Не ясно, что это табличные данные, как прокомментировали некоторые другие, хотя это может быть. Таблица подразумевает семантическую связь между всеми элементами в соответствующих столбцах (кроме просто «они - все имена столбцов базы данных»). В любом случае, вот как я это делал раньше: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Form layout</title>
    <style type="text/css">
        fieldset {width: 60%; margin: 0 auto;}
        div.row {clear: both;}
        div.row label {float: left; width: 60%;}
        div.row span {float: right; width: 35%;}
    </style>
</head>
<body>
    <form action="#" method="post">
        <fieldset>
            <legend>Section one</legend>
            <div class="row">
                <label for="first-field">The first field</label>
                <span><input type="text" id="first-field" size="15" /></span>
            </div>
            <div class="row">
                <label for="second-field">The second field with a longer label</label>
                <span><input type="text" id="second-field" size="10" /></span>
            </div>
            <div class="row">
                <label for="third-field">The third field</label>
                <span><input type="text" id="third-field" size="5" /></span>
            </div>
            <div class="row">
                <input type="submit" value="Go" />
            </div>
        </fieldset>
    </form>
</body>
</html>

Редактировать: Кажется, что «по замыслу» я не могу отвечать на комментарии к своему ответу, очевидно, это как-то не так запутанно. Итак, в ответ на 17 из 26 комментариев - ширина 60% является необязательной, по умолчанию fieldset наследует ширину содержащего элемента. Конечно, вы могли бы также использовать min-width и max-width или любое из правил размещения таблиц, если бы только IE поддерживал их, но это не означает, что CSS потерпит неудачу;)

0 голосов
/ 21 сентября 2008

Каждая строка должна быть принята как «div», который содержит два «span», один для имени поля и один для ввода. Установите «float: left» на обоих участках. Однако вам нужно установить некоторую ширину для диапазона 'fieldname'.

Кроме того, стиль div должен включать атрибут 'clear: both' для предосторожности.

0 голосов
/ 21 сентября 2008

Объекты FieldName должны содержаться в SPAN с атрибутами стиля float: left и шириной, достаточной для ваших меток.

Входные данные должны содержаться в промежутке, стилизованном для float: left. Поместите <div style="clear: both"/> или <br/> после каждого ввода поля, чтобы разбить плавающее число.

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

Пример: 

<span style="float: left; width: 200px">FieldName1</span><span style="float: left"><input/><br/>

<span style="float: left; width: 200px">FieldName2</span><span style="float: left"><input/><br/>

<span style="float: left">FieldName3</span><span style="float: left"><input/><br/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...