CODEWITHSUNDEEP
csshtmllabel
NPS
NPS

Reputation: 6355

Labels layout in div

<div id="combobox">
    <label><input type="checkbox" id="tag3"
        name="checkbox" onclick="toggleTag('tag3')"/>DialogProc</label><br/>
    <label><input type="checkbox" id="tag2"
        name="checkbox" onclick="toggleTag('tag2')"/>fds</label><br/>
</div>

I'm using div as a container for the checkboxes and their labels. I'm using <br/> to position one below another. Is there any way to have the same layout without using <br/> (css)?

Upvotes: 0

Views: 132

Answers (3)

dsgriffin
dsgriffin

Reputation: 68626

Better practice would be to separate them by <p> elements instead:

<p><label for="tag 3"><input type="checkbox" id="tag3"
        name="checkbox" onclick="toggleTag('tag3')"/>DialogProc</label></p>

<p><label for="tag2"><input type="checkbox" id="tag2"
        name="checkbox" onclick="toggleTag('tag2')"/>fds</label></p>

Also note that it is advisable to give the labels a for attribute to associate them with an input for multiple reasons (e.g. accessibility). You'd use <label for="tag3"> for the label for your first <input type="checkbox" id="tag3"> for example.

If you wanted to reduce the margins caused by using <p> elements, then you'd just apply some basic CSS rules to them, e.g. 

p {
  margin:0px;
}

Here's a jsFiddle.

Upvotes: 4

David
David

Reputation: 7525

CSS:

#combobox label {
    display:block;
}

then remove <br /> tags

Upvotes: 2

phonicx
phonicx

Reputation: 479

//css
#combobox label {
    float: left;
    clear: left;
}

Upvotes: 0

Related Questions