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>元素。

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? 它有许多样式示例：

带背景图片的定义列表
定义列表为方框
将定义列表样式化为表格

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

由于您似乎有表格数据，因此真正的表格似乎不合适。在这种情况下，您只需使用普通的表格语法。

Answer 4

使用两列<table>在这里是一个很好的解决方案，假设它不是一个非常长的表，因为它加载不同于一堆div或其他元素。

使用表格还可以根据需要灵活地格式化单元格内的各个元素，例如<td>中的项目符号列表。

使用css（悬挂缩进）使用文本而不是子弹的首选方法是什么

4 个答案: