0

我正在制作一个待办事项清单 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:我希望它看起来像第二张照片,而不是第一张。

4

2 回答 2

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>
于 2013-05-30T00:46:49.597 回答
0

由于这是结构化表格数据,table因此元素是最自然的解决方案。它也是最健壮的,因为即使在禁用 CSS 时它也能工作:

<table>
<caption>List Title</caption>
<tr valign=top><td>✓&lt;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>✓&lt;td>List Item 2
</table>

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

为简单起见,我使用了 CHECK MARK 字符。使用图标字体技巧替换它不会影响出现的问题。(但我会使用简单的图像而不是这样的技巧。)

于 2013-05-30T06:17:49.257 回答