Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS for displaying an indented ordered list with checkboxes before each list item

I'm not sure if this is possible, but I'm attempting to set up an ordered list with checkboxes in front of each list item, something like this:

  1. I would like this to have a checkbox to the left of the item number and wrap to the first word in the sentence, not to the item number.
  2. Same deal as item number 1, want a checkbox to the left of the item number and wrap to first word in sentence.

I've figured out the indenting stuff using this question, but haven't been able to get the checkboxes to show up on the same line as the <li>. Is there any way to do this?

Here's a jsFiddle I've been messing with.

like image 878
AJ. Avatar asked Oct 24 '25 18:10

AJ.


1 Answers

http://jsfiddle.net/9v97V/2/

You can do something like this. You put the input inside the list item, then absolute position it so it appears before the list item.

Most relevant CSS:

li input
{
    position: absolute;
    margin-left: -40px;
    margin-top: 5px;
}
like image 123
Eli Gassert Avatar answered Oct 27 '25 09:10

Eli Gassert