html - 使用br标签如何显示和调整元素？

Question

这是我的 jsFiddle here

HTML block :

 <span class="areas">
    <label><input type="checkbox" />Item <br/> 1</label>
    <label><input type="checkbox" />Item 2</label>
    <label><input type="checkbox" />Item 3</label>
    <label><input type="checkbox" />Item 4</label>
    <label><input type="checkbox" />Item 5</label>
    <label><input type="checkbox" />Item 6</label>
    <label><input type="checkbox" />Item 7</label>
  </span>
</div>

CSS :

div.arealist { display: block; clear: both; margin-top: 40px; }
div.arealist>span { display: inline-block; padding: 25px; }
div.arealist>span label { display: inline-block; }
div.arealist>span.group { width: 75px; border: 1px solid #d0d0d0; }
div.arealist>span.areas { width: 300px; border: 1px solid #d0d0d0; }

这是当我们输入 <br/> 时元素的显示方式元素内的标签:

我知道 <br/>标签只是通过在此处引入换行符来完成它需要做的事情。

但我的问题是如何显示这样的内容？

意思是，元素仍然按原来的顺序显示；但请注意 Item 1 .它只是stacks本身并在 <br/> 时自动调整存在。

我尝试定义一些 div 和 span，但对笨拙的代码不满意。执行此操作的最佳方法是什么？

我正在使用 angularjs , html5在我的元素中。有没有内置的方法可以做到这一点？

Answer 1

您可以将 label 移到 checkbox 之后，为复选框分配 id 并将其绑定(bind)到 label。

<input id="chk" type="checkbox" />
<label for="chk" style="vertical-align:middle; text-align:center;">Item <br/> 1</label>   

演示 here .