爲什麼這兩個內聯塊不對齊？

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，使labeldisplay: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

Answer 2

試試這個：

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

} 

.limit { 
    border: 1px solid black; 

    max-width: 300px; 
} 

input { 
    float: left; 
} 

Answer 3

內聯元素指定寬度，否則它會採取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