为什么这两个内联块不对齐？

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