How to emulate HTML unordered list behavior?

Question

I am making a to-do checklist webapp and I am using Raphael SVG icons as the checkmarks and status icons next to the list items.

As far as I know, this means that I can't use the standard unordered list bullet-point deal.

Here is what I am using for the list items:

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

I insert the checkmark icon inside the item-status class span with Javascript (Raphael).

and here is my 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;
}

That's fine if the "list item" is less than one line, but if it is more than one line it makes it look like this: enter image description here

and I want it to look more like this (mockup):

enter image description here

TL;DR: I want it to look like that second picture, not the first.

I'd appreciate if if someone could let me know why I was down-voted. @Web_Designer I did consider using a font but that wouldn't make a difference in terms of being able to replace the bullet with it, would it? Plus, Raphael allows for more customization and has a lot of cool built in animation features. And I plan on using multiple icons (not just the checkmark). — Josh Sherick
– Josh Sherick, Commented May 30, 2013 at 0:37
I didn't downvote. I'm just saying that Raphael is a giant 89 kb, and a bit excessive for something as simple as icons. — Web_Designer
– Web_Designer, Commented May 30, 2013 at 0:39
@dandavis I'm having the exact same issue even when I make .item inline-block. I also just tried messing around with float to no avail. — Josh Sherick
– Josh Sherick, Commented May 30, 2013 at 0:40

dandavis · Accepted Answer · 2013-05-30 00:46:49Z

1

this looks like something along those lines to me:

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

answered May 30, 2013 at 0:46

dandavis

16.8k5 gold badges43 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Sherick Over a year ago

Not exactly what I was looking for, because it makes the maximum width 7em, but it got me on the right track and it does align the text properly, so thanks, I'll mark it as the correct answer because setting the width for .item was what I needed to do to get it to align properly. Thanks!

Jukka K. Korpela · Accepted Answer · 2013-05-30 06:17:49Z

0

Since this is structurally tabular data, a table element is the most natural solution. It is also the most robust, since it works even when CSS is disabled:

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

You can use CSS to make the list title appear in large size and bold

For simplicity, I have used the CHECK MARK character. Replacing it by the use of an icon font trick does not affect the problem presented. (But I would use a simple image rather than such a trick.)

answered May 30, 2013 at 6:17

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

Collectives™ on Stack Overflow

How to emulate HTML unordered list behavior?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related