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

Question

我正在制作一个待办事项 list 网络应用程序，我使用 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;
}

如果“列表项”少于一行，那很好，但如果多于一行，它看起来像这样:

我希望它看起来更像这样(模型):

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>