代码之家 › 专栏 › 技术社区 › René Nyffenegger

使用CSS(挂起缩进)将文本替换为项目符号的首选方法是什么?

css

René Nyffenegger · 技术社区 · 15 年前

创建类似

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>

但它并没有给出我期望的结果(至少在火狐中)。

有人能帮我吗?

谢谢

任_)

4 回复 | 直到 15 年前

Adam Kiss 15 年前

它取决于您想要使用的数据,但从语义上讲,它看起来像术语和它的描述,所以 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>

Pekka 15 年前

从语义上讲,这似乎是一个鲜为人知的例子。 <dd> 和 <dt> 元素。

The W3C reference 有一个很好的例子:

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

但是,它的默认样式并不是您想要的。看看这篇文章: Definition lists â misused or misunderstood? 它有许多样式示例: