HTML/CSS:列表元素的类似列的布局

Question

我在一个表单元格中有一个列表（），其中的元素包含一个标签（"数据描述符"）和一个包含数据的span。请参阅下面的php代码：

...
echo '<li><label>Trade Name</label><span>' . $row['TRADE_NAME'] . '</span></li>';
echo '<li><label>Company</label><span>' . $row['COMPANY'] . '</span></li>';
echo '<li><label>Synonyms</label><span>' . $row['ALL_SYNONYMS'] . '</span></li>';
...

现在的问题是，如果跨度中的文本太长，它将"溢出到下一行"，并直接显示在标签下方：

Trade Name  XYZ
Company     ABC
Synonyms    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx

我希望它看起来像这样：

Trade Name  XYZ
Company     ABC
Synonyms    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            xxxxxxxxxxxxxxxxx

问题是此列表位于表格单元格中。据我所知，表格单元格中不允许使用div？是列表吗？我该如何解决上述问题？

编辑：

如果值为emtpy/null，则使用dl会导致以下问题：

Trade Name  XYZ
Company    Synonyms xxxx

->2个dt元素显示在同一行上。

Answer 1

一定是李的吗？为什么不在表中创建更多的表单元格级别？许多表格都有细分的单元格。（在您的代码中，将li替换为tr，将label和span替换为td，并将其包装在table中。）

作为第二个解决方案，我将去掉li和标签，并使用两个跨度，第一个跨度为class="floatleft"，第二个跨度为class="floatright"。然后用td span.floatlift｛display:block；float:left；｝（对于另一个span也是类似的）为这些类设置样式。你可能至少需要为左边的设置一个宽度，我认为它不需要高度。

Answer 2

这个布局对我来说就像一个表，所以我会使用一个表：

<table>
    <tbody>
        <tr>
            <td>Trade</td>
            <td>Name XYZ</td>
        </tr>
        <tr>
            <td>Company</td>
            <td>ABC</td>
        </tr>
        <tr>
            <td>Synonyms</td>
            <td>xxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxx</td>
        </tr>
    </tbody>
</table>

但是，如果你不想使用表，也不介意手动调整大小，你可以使用定义列表：

<dl>
    <dt>Trade</dt><dd>Name  XYZ</dd>
    <dt>Company</dt><dd>ABC</dd>
    <dt>Synonyms</dt><dd>xxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxx</dd>
</dl>

然后是一些CSS：

dt {
    float: left;
    width: 100px;
}
dd {
    margin-left: 100px;
}

这两种方法的一个例子是：http://jsfiddle.net/ambiguous/RftDM/

Answer 3

    <div class="container">
    <div class="spacer">
      &nbsp;
    </div>
    <div class="float">
      <img src="image1.gif" width="100" height="100"
      alt="image 1" /><br />
      <p>caption 1</p>
    </div>
    <div class="float">
      <img src="image2.gif" width="100" height="100"
      alt="image 2" /><br />
      <p>caption 2</p>
    </div>
    <div class="float">
      <img src="image3.gif" width="100" height="100"
      alt="image 3" /><br />
      <p>caption 3</p>
    </div>
    <div class="spacer">
      &nbsp;
    </div>
    </div>
div.spacer {
  clear: both;
  }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
Another one
div.float {
  float: left;
  }
div.float p {
   text-align: center;
   }
And the HTML:
<div class="float">
  <img src="image1.gif" width="100" height="100"
  alt="image 1" /><br />
  <p>caption 1</p>
</div>
<div class="float">
  <img src="image2.gif" width="100" height="100"
  alt="image 2" /><br />
  <p>caption 2</p>
</div>
<div class="float">
  <img src="image3.gif" width="100" height="100"
  alt="image 3" /><br />
  <p>caption 3</p>
</div>