what is the preferred way to have text instead of bullets with css (hanging indent)

What is the preferred methon to create something like

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.

I have tried

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

.item {
  width:100px;
}

...

<div class='desc'>
  <span class='item'>Apples</span> Apples can be green ....开发者_开发知识库
</div>

But it didn't really give the result I expected (at least in Firefox).

Can someone help me here?

Thanks

René

---

Semantically, this looks like a case for the little-known <dd> and <dt> elements.

The W3C reference has a nice example:

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

However, its default styling is not exactly what you want. Check out this article: Definition lists – misused or misunderstood? it has a number of styling examples:

• Definition list with background images
• Definition list as boxes
• Styling a definition list to look like a table

---

It depends on data you want to use, but semantically speaking it seems like term and it's description, so dl hops in mind ^^

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>

---

A real table wouldn't seem to be out of line here since you seem to have tabular data. In that case you would just use the normal table syntax.

---

Using a two-column <table> would be a good solution here, assuming it isn't a very very long table as this loads differently from a bunch of divs or other elements.

Using a table will also leave you with the flexibility of formatting individual elements inside cells as you want, such as a bulleted list inside a <td>.