Html 为什么这两个内联块没有对齐？

我有一个简单的复选框标签对齐的情况，我似乎无法让它工作。 标签应换行，所有行应从第一行开始的位置开始。 与此类似：

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>

下面是一个活生生的例子：

我现在就知道了：

0 
  Xxxxx
  xxxxx
  xxxxx

---

我做错了什么？

将

浮动：左

添加到

输入

并使

标签

显示：块

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
}

试试这个：

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

}

.limit {
  border: 1px solid black;

  max-width: 300px;
}

input {
   float: left; 
}

---

为内联元素指定宽度，否则需要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;
}

---

我喜欢这个答案，因为它不会让我在内联块上放置一个

max width

。还有，我+1@Suresh，因为他指出，

内联块将占据100%的宽度，这是我设计问题的根本原因。（这将使这个答案完整，国际海事组织）谢谢。我选择了另一个答案，但你的评论帮助我理解了我设计中的问题（我没有选择你的答案，因为我觉得更好的解决方案不包括
max width
，但我选择了+1你的答案）没问题Ben。我很高兴，因为它在某些方面帮助了你。
 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;
}