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

Answer 2

为内联元素指定宽度，否则将占用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

Answer 3

试试这个：

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

}

.limit {
  border: 1px solid black;

  max-width: 300px;
}

input {
   float: left; 
}

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

3 个答案: