使用css（悬挂缩进）生成文本而不是项目符号的首选方式是什么

创建这样的东西的首选方法是什么

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>

.desc{
左边距：140像素；
文本缩进：-100px；
}
.项目{
宽度：100px；
}
...
苹果可以是绿色的。。。。

但它并没有达到我预期的效果（至少在Firefox中是这样）

有人能帮我吗

谢谢

---

René

一个真正的表格在这里似乎不会有任何偏差，因为您似乎有表格数据。在这种情况下，您只需使用正常的表语法。

因为您似乎有表格数据，所以实际的表在这里不会显得不一致。在这种情况下，您只需使用普通的表语法。

它取决于您想要使用的数据，但从语义上讲，它似乎是术语及其描述，因此

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>

dt{显示：块；浮点：左；宽度：140px；}
苹果
对它的描述更多的文字行来显示它。
香蕉
对它的描述更多的文字行来显示它。
柠檬
对它的描述更多的文字行来显示它。

它取决于您想要使用的数据，但从语义上讲，它似乎是一个术语及其描述，所以

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>

dt{显示：块；浮点：左；宽度：140px；}
苹果
对它的描述更多的文字行来显示它。
香蕉
对它的描述更多的文字行来显示它。
柠檬
对它的描述更多的文字行来显示它。

从语义上讲，这看起来像是鲜为人知的

和

元素的例子

有一个很好的例子：

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

德韦布
可能成熟的易激动的年轻人
变成书呆子或极客
黑客
聪明的程序员
书呆子
技术上聪明但社交能力差的人

然而，它的默认样式并不是您想要的。查看本文： 它有许多样式示例：

• 带有背景图像的定义列表
• 定义列表为框
• 设置定义列表的样式以使其看起来像表

---

从语义上讲，这看起来像是鲜为人知的

和

元素的例子

有一个很好的例子：

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

德韦布
可能成熟的易激动的年轻人
变成书呆子或极客
黑客
聪明的程序员
书呆子
技术上聪明但社交能力差的人

然而，它的默认样式并不是您想要的。查看本文： 它有许多样式示例：

• 带有背景图像的定义列表
• 定义列表为框
• 设置定义列表的样式以使其看起来像表

在这里使用两列

将是一个很好的解决方案，假设它不是一个很长的表，因为它的加载方式不同于一组div或其他元素

使用表还可以根据需要灵活地格式化单元格中的单个元素，例如使用两列

将是一个很好的解决方案，假设它不是一个很长的表，因为它的加载方式不同于一组div或其他元素

---

使用表格还可以根据需要灵活设置单元格内各个元素的格式，例如

中的项目符号列表，谢谢。我自己也在考虑一个表，但由于我可能会决定在未来某个时候以不同的视觉格式创建“列表”，我希望会有一个非表解决方案。如果您可能需要更改它，那么其他人推荐的定义列表肯定会起作用。我只是想指出，如果你用正确的方式使用表格（也就是说，不仅仅是为了布局），那么表格并没有什么问题。在我看来，它不像是表格数据。确实如此。想象一下，它有一些列标题，比如术语和定义。如果您必须有另一列（例如，引用），您将无法使用定义列表，而只能使用表。严格地说，它实际上只是一个表显示，没有其他功能。它不是一个格式化的列表，它不是浮动的div，它不是缩进的段落。这是一张桌子。我还认为这里的表格是定义列表的最佳解决方案。谢谢。我自己也在考虑一个表，但由于我可能会决定在未来某个时候以不同的视觉格式创建“列表”，我希望会有一个非表解决方案。如果您可能需要更改它，那么其他人推荐的定义列表肯定会起作用。我只是想指出，如果你用正确的方式使用表格（也就是说，不仅仅是为了布局），那么表格并没有什么问题。在我看来，它不像是表格数据。确实如此。想象一下，它有一些列标题，比如术语和定义。如果您必须有另一列（例如，引用），您将无法使用定义列表，而只能使用表。严格地说，它实际上只是一个表显示，没有其他功能。它不是一个格式化的列表，它不是浮动的div，它不是缩进的段落。这是一张桌子。我还认为这里的表是定义列表的一个更好的解决方案。