我正在制作一个待办事项清单 webapp,我使用 Raphael SVG 图标作为列表项旁边的复选标记和状态图标。
据我所知,这意味着我不能使用标准的无序列表要点交易。
这是我用于列表项的内容:
<li class='list-item'><span class='item-status'></span> <span class='item'>List Item 2</span></li>
item-status
我使用 Javascript (Raphael) 在类跨度内插入复选标记图标。
这是我的 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:我希望它看起来像第二张照片,而不是第一张。