使用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>

但是,它的默认样式并不完全符合您的要求.看看这篇文章: 定义列表 - 误用或误解？ 它有许多样式示例:

• 带有背景图像的定义列表
• 定义列表为方框
• 样式化定义列表看起来像一个表