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

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

据我所知，这意味着我不能使用标准的无序列表要点交易

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

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

如果“列表项”少于一行，这很好，但如果它多于一行，则会使其看起来像这样：

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

---

TL；博士：我希望它看起来像第二张照片，而不是第一张。

在我看来，这就像是第二张照片：

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

保险商实验室{
列表样式类型：无；
填充：0px；
边际：0px；
}
ulli{
左侧填充：14px；
}
span.item{宽度：7em；}
span.item-status，span.item{
显示：内联块；
垂直对齐：顶部；
页边顶部：-5px；
光标：指针；
}

*
列表项2列表项2列表项2列表项2列表项2
*
列表项目3列表项目3列表项目3列表项目3

由于这是结构上的表格数据，因此

表格

元素是最自然的解决方案。它也是最健壮的，因为它即使在禁用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>

列表标题
✓列表项Lorem Ipsum Dolor Sit Amet这是一个
很长一段时间，人们真的不应该
这么长时间
✓清单项目2

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

---

为了简单起见，我使用了复选标记字符。使用图标字体技巧替换它不会影响出现的问题。（但我会使用一个简单的图像，而不是这样的技巧。）

make.item内联块。你也可以让它们浮动。你考虑过使用一个吗？如果有人能告诉我为什么我被否决了，我将不胜感激@WebSudio我确实考虑过使用字体，但是这对用它来替换子弹来说不会有什么区别，不是吗？另外，Raphael允许更多的定制，并且有很多很酷的内置动画功能。我计划使用多个图标（不仅仅是复选标记），我没有投反对票。我只是说Raphael是一个巨大的89KB，对于像图标这样简单的东西来说有点太多了。@dandavis即使在我制作

.item

内联块时，我也有同样的问题。我也试着用float乱搞，但没用。这不完全是我想要的，因为它的最大宽度为7em，但它让我走上了正确的轨道，并且它确实正确地对齐了文本，所以谢谢，我将把它标记为正确答案，因为设置
.item
的宽度是使其正确对齐所需的操作。谢谢
<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>