Question

我正在研究一个相当困难的样式问题。我有一个包含在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结构上实现类似于表格的样式有任何建议？

Answer 1

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

请参阅demo。

CSS - 将ul元素设置为样式，就像它们是表行元素一样

1 个答案: