CODEWITHSUNDEEP
htmlcsshtml-lists
AJ.
AJ.

Reputation: 16719

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.

Upvotes: 4

Views: 7311

Answers (3)

Han Arahan
Han Arahan

Reputation: 11

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            form{
                border: 2px solid #f1f1f1;
                text-align: left;
                }
    
            ol{
                margin-left:40%; 
                font-weight:bold;   
            }
        </style>
    </head>
    
    <body>
    
        <div class="container">
            <form action="/action.php">
                <ol type="A" style="color: red" >
                    <li><p >CSE</p></li>
                    <ol type="i" style="margin-left:-13%; color: blue">
                        <li>
                            <input type="checkbox" id="cb1" name="op1">
                            <label for="cb1"> Artificial Intelligence</label>
                        </li><br>
                        <li>
                            <input type="checkbox" id="cb2" name="op2">
                            <label for="cb2">Machine Learning</label>
                        </li>   
                    </ol><br>
                    <li><p>ECE</p></li>
                    <ol type="A" style="margin-left:-13%; color: blue">
                        <li>
                            <input type="checkbox" id="cb3" name="op3">
                            <label for="cb3">Embedded Systems</label>
                        </li><br>
                        <li>
                            <input type="checkbox" id="cb4" name="op4">
                            <label for="cb4">IOT</label>
                        </li><br>
                    </ol>
                </ol>       
            </form>
        </div>
        
    </body>
</html>

Upvotes: 0

ikbenivo
ikbenivo

Reputation: 66

I've made a new jsFiddle based on yours: http://jsfiddle.net/3VESY/1/

Basicly I've put the text in a span (could also be a div) and a float on the input. The span has a padding-left to create the indent. Hope that's what you needed?

ol {
    list-style-type:decimal;
    margin-left:20px;
}

ol li span {
    display:block;
    padding-left:30px;
}
input
{
    float:left;
}

edit updated fiddle: http://jsfiddle.net/3VESY/1/ to add numbers

Upvotes: 1

Eli Gassert
Eli Gassert

Reputation: 9763

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

Upvotes: 7

Related Questions