HTML и CSS для выравнивания по меткам в виде таблиц - PullRequest
Новая
       12

HTML и CSS для выравнивания по меткам в виде таблиц

1 голос
/ 25 мая 2011

Хорошо, это стыдно. Я почти испытываю желание использовать TABLE, но думаю, что это неправильно.

По сути, у меня есть страница с fieldset, которая в «режиме редактирования» имеет несколько входных данных, например: 

<label for="txtName">Address</label>
<textarea name="Name" id="txtName">
    1 The test
    AddressTown
    UK
</textarea>

Когда эта страница находится в режиме «Только чтение», textarea превращается в промежуток, например, 

<label>Address</label>
<span>
    1 The test<br />
    AddressTown<br />
    UK
</span>

Я хочу разместить метку и значение в табличном виде, чтобы каждый label был слева с фиксированной шириной, а input или span следовал за ним следующим образом: 

---------------------------
Name       1 the test
           AddressTown
           UK
---------------------------

Это было бы легко понять в ТАБЛИЦЕ: 

<table>
<tr>
    <th style="width: 150px; vertical-align: top;">
        <label>Address</label>
    </th>
    <td>
        <span>
        1 The test<br />
        AddressTown<br />
        UK
        </span>
    </td>
</table>

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

  • Вторая строка span переносится ниже label
  • Диапазон начинается прямо под label
  • Я получаю хорошую табличную раскладку НО Мне нужно указать ширину диапазона, что я не хочу делать.

Есть идеи?

1 Ответ

3 голосов
/ 25 мая 2011

Согласно моему комментарию выше, нет ничего плохого в использовании таблиц для табличного макета! Однако, если вы действительно не хотите использовать таблицы, вы можете установить диапазон для display: block и дать ему поле. 

<!DOCTYPE html>
<html>
    <label>Address</label>
    <span>
        1 The test<br />
        AddressTown<br />
        UK
    </span>

    <style>
        label { float: left; width: 200px; }
        span { margin-left: 200px; display: block; }
    </style> 
</html>
...