Question

我正在制作待办事项清单webapp，我使用Raphael SVG图标作为列表项旁边的复选标记和状态图标。

据我所知，这意味着我无法使用标准的无序列表项目符号。

以下是我用于列表项目的内容：

<li class='list-item'><span class='item-status'></span> <span class='item'>List Item 2</span></li>

我使用Javascript（Raphael）在item-status班级范围内插入复选标记图标。

这是我的CSS

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li {
    padding-left: 14px;
}
span.item-status {
    display: inline-block;
    vertical-align: top;
    margin-top: -5px;
    cursor: pointer;
}
span.item {
    vertical-align: top;
}

如果“列表项”少于一行，那就没问题了，但是如果它超过一行，则它看起来像这样： enter image description here

我希望它看起来更像这样（样机）：

enter image description here

TL; DR：我希望它看起来像第二张图片，而不是第一张图片。

Answer 1

这对我来说就是这样的事情：

<style>
ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    padding-left: 14px;

}

span.item  { width: 7em; }

span.item-status, span.item  {
    display: inline-block;
    vertical-align: top;
    margin-top: -5px;
    cursor: pointer;
}

</style>

<ul>
  <li class='list-item'><span class='item-status'>*</span> 
       <span class='item'>List Item 2 List Item 2 List Item 2 List Item 2 </span></li>
  <li class='list-item'><span class='item-status'>*</span> 
       <span class='item'>List Item 3 List Item 3 List Item 3 List Item 3 </span></li>
</ul>

Answer 2

由于这是结构上的表格数据，因此table元素是最自然的解决方案。它也是最强大的，因为即使禁用CSS也可以使用它：

<table>
<caption>List Title</caption>
<tr valign=top><td>✓<td>List Item Lorem Ipsum Dolor Sit Amet This is a
pretty long to do people really shouldn’t make
them this long
<tr valign=top><td>✓<td>List Item 2
</table>

您可以使用CSS使列表标题以大尺寸和粗体显示

为简单起见，我使用了CHECK MARK字符。通过使用图标字体技巧替换它不会影响显示的问题。（但我会使用一个简单的图像，而不是这样的技巧。）

如何模拟HTML无序列表行为？

2 个答案: