CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 10298

why are these 2 inline-blocks not aligning?

I have a simple case of checkbox-label to align and I can't seem to get it to work. The label should wrap and all rows should start where the first row starts. Similar to this:

0 Xxxx
  xxxx
  xxxx

as opposed to this:

0 Xxxx
xxxxxx
xxxxxx

The html is:

<div class="limit">
    <input id="dd" type="checkbox" />
    <label for="dd" > Label text dh dfjgh dfhd;fhdh djh gfjh sfghj gpfhj sfpgdhj spfghj pfgohj spdfgoh spdfgih spdfgohi</label>
</div>

css:

label {
    display: inline-block;
    margin-left: 1.5em;
    border: 1px dashed gray;
}

.limit {
  border: 1px solid black;
  vertical-align: top;
  max-width: 300px;
}

input {
  display: inline-block; 
}

and the live example is here: http://jsbin.com/virohima/1/edit?html,css,output

I'm getting this right now:

0 
  Xxxxx
  xxxxx
  xxxxx

What am I doing wrong?

Upvotes: 1

Views: 76

Answers (3)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Assign width for inline elements otherwise it will take 100%.

 label {
 display: inline-block;
 border: 1px dashed gray;
 width:272px;
 }

.limit {
border: 1px solid black;
vertical-align: top;
max-width: 300px;
}

input {
display: inline-block; 
width:20px;
margin:0px;
vertical-align:top;
}

DEMO

Upvotes: 1

Luiggi
Luiggi

Reputation: 368

Try this:

label {
    display: inline;
    margin-left: 1.5em;
    border: 1px dashed gray;

}

.limit {
  border: 1px solid black;

  max-width: 300px;
}

input {
   float: left; 
}

Upvotes: 0

Sowmya
Sowmya

Reputation: 26989

Add float:left to input and make label display:block

label {
    display: block;
    margin-left: 1.5em;
    border: 1px dashed gray;
}

.limit {
  border: 1px solid black;
  vertical-align: top;
  max-width: 300px;
}

input {
  display: inline-block; 
  float:left
}

DEMO

Upvotes: 1

Related Questions