html - 为什么这两个内联 block 不对齐？

Question

我有一个简单的复选框标签要对齐，但我似乎无法让它工作。 标签应该换行，所有行都应该从第一行开始的地方开始。 类似这样:

0 Xxxx
  xxxx
  xxxx

与此相反:

0 Xxxx
xxxxxx
xxxxxx

html 是:

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

实例在这里:http://jsbin.com/virohima/1/edit?html,css,output

我现在明白了:

0 
  Xxxxx
  xxxxx
  xxxxx

我做错了什么？

Answer 1

将float:left添加到input并制作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