CODEWITHSUNDEEP
htmlcss
Paul L
Paul L

Reputation: 2260

Make check box items indent like an unorderded list inside a list?

Is it possible to make check box items indented like Unordered list items inside a ordered list?

Here is the mock-up

The major issue I faced so far that is multi-line text will not indent. and I don't want make a table just for that layout.

The requirement is IE8 (I know, I know, but it is for banks).

New Update: I end up using something like this, it works well with IE8 and reasonable well in Firefox 22:

<div>My list starts here.</div>
<ol>
    <li>First item
        <br/>
        <input type="checkbox" name="item1" /><span class="CheckBoxSpan"></span>
        <label>Checkbox item one, it also need be indent probaly like an list item, what happens if it has more than one line, it need be indentes, not wrap</label>
        <br/>
        <input type="checkbox" name="item1" /><span class="CheckBoxSpan"></span>
        <label>Another checkbox item one, again it also need be indent probaly like an list item, what happens if it has more than one line, it need be indentes, not wrap</label>
    </li>
</ol>

And CSS

.CheckBoxSpan 
{
 position: relative;
    left: 4em;   
}
li label 
{
    display:inline-block;
    max-width:80%;
    vertical-align:top
}
li input 
{
    width: 1.4em;
    margin-left: -1.9em;
}

Upvotes: 0

Views: 6591

Answers (1)

Mr Lister
Mr Lister

Reputation: 46579

Without more info it's difficult to figure out what you want, but I think this may come very close. Just give the labels for the checkboxes display:block. And some cosmetics to make it look right.

li label {display:inline-block; max-width:80%; vertical-align:top}

See http://jsfiddle.net/MrLister/6VyL6/1

If that's not what you're after, you may have to show some code of your own.

Upvotes: 3

Related Questions