Каков предпочтительный способ иметь текст вместо маркеров с помощью CSS (висячий отступ)

Question

Какой метон предпочтителен для создания чего-то вроде

Apples   Apples can be
         green or red or
         more text more text

Bananas  Most of the time
         bananas are yellow
         (or green, if they're
         not ripe)

Item X   Each item should be aligned
         with the previous item, and
         each text (such as this 
         sentence) should be alligned
         with the previous text.

Я пробовал

.desc {
  margin-left: 140px;
  text-indent: -100px;
}

.item {
  width:100px;
}

...

<div class='desc'>
  <span class='item'>Apples</span> Apples can be green ....
</div>

Но это не дало ожидаемого результата (по крайней мере в Firefox).

Может ли кто-нибудь помочь мне здесь?

Спасибо

Рене

Answer 1

Семантически это выглядит как случай для малоизвестных элементов <dd> и <dt>.

Ссылка W3C имеет хороший пример:

<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>

  <DT>Hacker
  <DD>a clever programmer

  <DT>Nerd
  <DD>technically bright but socially inept person

</DL>

Однако его стиль по умолчанию не совсем то, что вам нужно.Посмотрите эту статью: Списки определений - неправильно или неправильно понято? в нем есть несколько примеров стилей:

• Список определений с фоновыми изображениями
• Список определений в виде блоков
• Стилизация списка определений в виде таблицы

Answer 2

Это зависит от данных, которые вы хотите использовать, но, говоря семантически, это похоже на термин и его описание, поэтому dl запоминается ^^

dt { display: block; float: left; width: 140px; }

<dl>
  <dt>Apples</dt>
  <dd>Description to it more lines of text to show it.</dd>
  <dt>Bananas</dt>
  <dd>Description to it more lines of text to show it.</dd>
  <dt>Lemon</dt>
  <dd>Description to it more lines of text to show it.</dd>
</dl>

Answer 3

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

.

Answer 4

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