为什么这两个内联块不对齐？ [英] why are these 2 inline-blocks not aligning?

问题描述

我有一个简单的情况下checkbox-label对齐，我似乎不能得到它的工作。
标签应该换行，所有行应该从第一行开始。
类似于此：

  0 Xxxx 
 xxxx 
 xxxx 
  
 
 
 
而不是这样：
  0 Xxxx 
 xxxxxx 
 xxxxxx 
  
 html是：
 < div class =limit> 
< input id =ddtype =checkbox/> 
< label for =dd>标签文字dh dfjgh dfhd; fhdh djh gfjh sfghj gpfhj sfpgdhj spfghj pfgohj spdfgoh spdfgih spdfgohi< / label> 
< / div> 
  
 css：
 code> label {
 display：inline-block; 
 margin-left：1.5em; 
 border：1px broken gray; 
} 
 
 .limit {
 border：1px solid black; 
 vertical-align：top; 
 max-width：300px; 
} 
 
输入{
 display：inline-block; 
} 
  
，实例如下： http://jsbin.com/virohima/1/edit?html,css,output  
 
 
 
我现在得到这个：
  0 
 Xxxxx 
 xxxxx 
 xxxxx 
  
我做错了什么？
解决方案
添加 float：left 到输入并使标签  display：block  
  label {
 display：block; 
 margin-left：1.5em; 
 border：1px broken gray; 
} 
 
 .limit {
 border：1px solid black; 
 vertical-align：top; 
 max-width：300px; 
} 
 
输入{
 display：inline-block; 
 float：left 
} 
  
   DEMO   
 
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?
解决方案
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

                        
这篇关于为什么这两个内联块不对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！