CODEWITHSUNDEEP
htmlcss
Warface
Warface

Reputation: 5119

How can i fix the margin of a label next to a checkbox?

I have a check box that I have added a margin-right:10px for a little space between them. It's working fine but when the label have a line-break like this exemple, the margin doesn't seem to work properly. I would like to have the check box alone on the left and the label on the right without having it under the checkbox if it have multiple lines.

Code

<dd id="rr-element">
   <label for="rr-1">
      <input type="checkbox" value="1" id="rr-1" name="rr[]">
      Value 1 lorem lipsum dolor si amet 
   </label>
</dd>

CSS

#rr-element{width:180px;}
dd label input {
   margin-right:10px;
}

Little update : The max-width of the ul or dd is 180px; I don't want it to be on a single line.

Upvotes: 1

Views: 130

Answers (6)

Prasad
Prasad

Reputation: 1812

It would be better if you can make two different div or span for them so equal space between your check box and text. 

label
{
display:inline-block;
}
input[type=checkbox]
{
display:inline-block;
margin-right:10px;
}

Upvotes: 0

Ionut Flavius Pogacian
Ionut Flavius Pogacian

Reputation: 4801

I would do it this way:

.rr-element{min-width:180px;}
dd input {
   margin-right:10px;
}

<dd class="rr-element">
<input value="2" id="rr-1" type="checkbox" name="SearchForm[position][]">
<label for="rr-1">Bartender</label>
</dd>

Upvotes: 0

Pete
Pete

Reputation: 58442

try this

html

<dd id="rr-element">
    <input value="2" id="rr-1" type="checkbox" name="SearchForm[position][]">
    <label for="rr-1">Value 1 lorem lipsum dolor lorem lipsum dolorlorem lipsum dolor</label>
</dd>

css

#rr-element{width:180px; overflow:auto;}
dd label {float:right; width:150px; display:inline-block;}
dd label input {float:left; margin-right:10px;}

Example

Upvotes: 2

Warface
Warface

Reputation: 5119

I have found a way

Fiddle

Code

<dd id="rr-element">
    <input value="2" id="rr-1" type="checkbox" name="SearchForm[position][]" />
<label for="rr-1">Value 1 lorem lipsum dolor lorem lipsum dolorlorem lipsum dolor</label>
</dd>

CSS

#rr-element{width:180px;}


label,
input {
    display: block;
}

input {
    float: left;
    margin-right:10px;
}

label {
    overflow: hidden;
}

Upvotes: 0

maximkou
maximkou

Reputation: 5332

#rr-element{
    width:180px; 
    white-space:nowrap;
}

Upvotes: 2

Leo T Abraham
Leo T Abraham

Reputation: 2437

Change the Style

#rr-element{width:auto;}

Upvotes: 0

Related Questions