0

To Do チェックリスト Web アプリを作成しており、リスト項目の横にあるチェックマークとステータス アイコンとして Raphael SVG アイコンを使用しています。

私の知る限り、これは標準の順序なしリストの箇条書きを使用できないことを意味します。

リスト項目に使用しているものは次のとおりです。

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

item-statusJavascript (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;
}

「リスト項目」が 1 行未満の場合は問題ありませんが、複数行の場合は次のようになります。 ここに画像の説明を入力

そして、私はそれをもっとこのようにしたい(モックアップ):

ここに画像の説明を入力

TL;DR:最初の写真ではなく、2 番目の写真のようにしたい.

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を使用して、リストのタイトルを大きなサイズで太字で表示できます

簡単にするために、チェックマーク文字を使用しました。アイコンフォントトリックを使用してそれを置き換えても、提示された問題には影響しません。(しかし、そのようなトリックではなく、単純なイメージを使用します。)

于 2013-05-30T06:17:49.257 に答える