1

我正在研究一个相当困难的造型问题。我有一组包含在 div 标签内的 ul 元素。从视觉上看，每个 ul 都应该在表格中显示为一行。结构如下：

<div class="tableElementEmulation">
   <ul class="trElementEmulation">
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
   </ul>
</div>

我需要设置这个结构的样式，让它像 HTML 表格一样工作。这已被证明是非常困难的，因为 table 元素本身可以处理大量表格格式，而无需任何额外的 css。无论如何，我都不是 CSS 大师，所以到目前为止，复制该功能还不是很成功。

显然，使用实际的 HTML 表格来实现这种格式会更容易，但我正在为这个页面使用一个插件，它只适用于类似于我上面列出的结构。我需要为页面使用这个插件，所以不幸的是，只使用 HTML 表格不是一个选项。有没有人对在上面列出的这个 html 结构上实现类似表格的样式有任何建议？

4

1 回答 1

5

HTML：

<div class="tableElementEmulation">
   <ul class="trElementEmulation">
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
      <li class="tdElementEmulation">Some text</li>
   </ul>
</div>

CSS：

.trElementEmulation li {
    list-style:none;
    float:left;
    padding: 5px 10px;
    border: 1px solid #eee;
}

请参阅演示。

于 2012-07-02T20:21:01.167 回答