Question

我想创建一个2列列表。

-----------------------------------
price         1.5
-----------------------------------
description   Some text about the
              product written here
              and will expand the 
              height of this column
-----------------------------------
availability  Yes
-----------------------------------
Feature       Some feature about
              the product 
-----------------------------------

我在每个li中使用带有span标记的列表来使内联信息。但问题是当信息变得比描述和特征的情况更长时，列高度不会增长，因此第二行的文本被隐藏。

那么如何根据书面文字的数量使左侧栏的高度与右栏相同？

Answer 1

这个论点变得有些愚蠢...似乎没有人建议表格用于没有语义含义的布局，只是提供的示例数据是表格式的，因此应该显示在表格中。因此，当很明显参与这场辩论的每个人都在几年前过去时，我无法看到关于表格布局的链接。

正如BalusC所说，数据可以非常正确地显示在定义列表中。它肯定会产生更优雅的标记，但它是否在语义上更正确（显然，从这个讨论中）是值得商榷的。我知道没有表格数据的定义排除了这种用途，包括OED！因此，正如prodigitals所说，使用这个数据的表格也是完全有效的。

罗伯特格兰特 - 您能否提供一个链接，将表定义为需要两个标签来识别它的数据？我不知道这个定义，但我愿意学习。我有点困惑的是，如果在div中使用spans在语义上比在表中更有效。或者它是如何以任何方式语义的。两者都是毫无意义的标签。

使用的标记必须建立键值对之间的关系。只有一个表或dl可以做到这一点。

该表的示例标记非常合理（因为不需要aad btw，tbody标记实际上不是必需的，因为表中没有其他元素可以区分）。除了标题之外，屏幕阅读器还需要标签上的scope =“row”。

说完这一切之后，这里的重点是帮助某人解决问题。这个问题的性质往往表明garj不是一个先进的前端开发人员，他们的CSS技能可能还没有达到最高标准。对我来说，这意味着使用表格解决方案是更可取的。无论如何，在具有大量市场份额的任何浏览器中以优雅的方式降低dl的样式并不是一项微不足道的任务。

Answer 2

正如Cletus关于你的问题的评论所说......用一张桌子。表有一个有效的用途，如果这不是一个，那么什么都没有 - 显示这种类型的数据是它们被实现的确切原因。

<style type="text/css">
  table.product td, table.product th {vertical-align: top; padding: 5px;}
</style>
<table class="product" cellspacing="0" border="0" width="250">
<tr>
  <th>price</th>
  <td>1.5</td>
</tr>
<tr>
  <th>description</th>
  <td>Some text about the product written here and will expand the height of this column</td>
</tr>
<tr>
  <th>availability</th><td>yes</td>
</tr>
<tr>
  <th>Feature</th>
  <td>Some feature about the product</td>
</tr>
</table>

Answer 3

此功能优于<dl>，但在语义上不如<table>。

<ul>
    <li>
        <h2>Price</h2>
        <p>1.5</p>
    </li>
    <li>
        <h2>Description</h2>
        <p>Some text about the product written here and will expand the  height of this column</p>
    </li>
    <li>
        <h2>Availability</h2>
        <p>Yes</p>
    </li>
    <li>
        <h2>Feature</h2>
        <p>Some feature about the product</p>
    </li>
</ul>

这比<dl>更好，因为<li>充当包装器，并且会保留<p>内容。如果您使用<dl>，则单独的<dt>和<dd>周围没有包装。

当<p>展开时，它不会崩溃到下一个<li>

CSS：

li {
    overflow: hidden;
    width: 500px; /* or however wide it needs to be */
    }

li h2 {
    float: left;
    width: 150px;
    }       

li p {
    float: right;
    width: 350px;
    }

Answer 4

这是我的捅。在Firefox 3和IE7中进行了测试，所以YMMV，但至少它会很好地降级。

<html>
<head>
    <style type="text/css">
      #items {
        width: 300px;
        border-top:1px solid gray;
      }

      #items div {
        clear: left;
        overflow:hidden;
        padding: 5px 0;
        border-bottom:1px solid gray;
      }

      .key  {
        width:100px;
        float:left;
      }

      .value  {
        width:200px;
        float:left;
      }
    </style>
</head>
<body>
  <div id="items">
    <div>
      <span class="key">price</span>
      <span class="value">1.5</span>
    </div>
    <div>
        <span class="key">description</span>
        <span class="value">Some text about the product written here 
        and will expand the height of this column</span>
    </div>
    <div>
        <span class="key">availability</span>
        <span class="value">Yes</span>
    </div>
    <div>
        <span class="key">Feature</span>
        <span class="value">Some feature about the product</span>
    </div>
  </div>
</body>
</html>

另见：

css两列列，平衡列高

4 个答案: