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