HTML/CSS : column-like layout for list elements

Question

我在表格单元格中有一个列表 ()，其中的元素包含一个标签(“数据描述符”)和一个包含数据的跨度。请参阅下面的 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>';
...

现在的问题是如果span中的文本太长会“溢出到下一行”直接显示在label下面:

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的吗？为什么不在表中创建更多的表单元格级别？许多表格都有分割的单元格。 (在您的代码中，将 li 替换为 tr，并将标签和跨度替换为 td，并将​​其包装在 table 中。)

作为次要解决方案，我将删除 li 和标签并使用两个跨度，第一个使用 class="floatleft"，第二个使用 class="floatright"。然后只需使用 td span.floatleft {display:block;float:left;} 设置这些类的样式(另一个跨度也类似)。您可能必须至少为左侧设置一个宽度，我认为它不需要高度。