Html 使用br标记时如何显示和调整元素？

这是我的

jsFiddle

HTML块：

 <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>

这是在元素中输入

标记时元素的显示方式：

我知道，

标记通过在此处引入换行符来完成它需要完成的任务

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

也就是说，项目仍按原始顺序显示；但是请注意

项目1

。只要出现

，它就会堆叠

自身并自动调整

我试图定义一些div和span，但对笨拙的代码并不满意。这样做的最佳方式是什么

我正在我的项目中使用
angularjs
，
html5
。是否有任何内置方法可以执行此操作？
您可以将
标签移动到
复选框之后，为复选框指定
id
，并将其绑定到
标签

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


项目
1

演示。
您可以在
复选框
之后移动
标签
，为复选框分配
id
，并将其绑定到
标签

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


项目
1

演示。
您可以使用标签元素的
文本对齐：居中

div.arealist>span label{display:inline block；text align:center；}
您可以对label元素使用
text align:center

div.arealist>span label{display:inline block；text align:center；}
有一种使用CSS3 flexbox的替代方法，它实际上非常接近您想要的。与流行的观点相反：除非您想扩展对IE9及以下版本的支持。不过，您需要在两个级别上应用flexbox：

在
span.areas
父级上，因为您希望分发单个
元素
在每个
元素中，当您要定位复选框时，使其垂直居中
当然还有其他的黑客，比如
display:table cell
，但由于flexbox的灵活性（没有双关语），我通常支持它

以下是基于您的代码的概念验证示例：


div.arealist{
显示：块；
明确：两者皆有；
边缘顶端：40px；
}
/*跨度。具有flexbox的区域，
因此，我们可以分发标签组
*/
分区列表>范围{
显示器：flex；
柔性包装：包装；
填充：25px；
}
/*每个标签也要有flexbox，
所以我们可以将复选框垂直居中
*/
分区列表>范围标签{
显示器：flex；
对齐项目：居中；
文本对齐：居中；
}
分区区域列表>跨度区域{
宽度：300px；
边框：1px实心#d0；
}

项目
1
项目2
项目3
项目4
项目5
项目6
项目7
有一种使用CSS3 flexbox的替代方法，它实际上非常接近您想要的。与流行的观点相反：除非您想扩展对IE9及以下版本的支持。不过，您需要在两个级别上应用flexbox：

在
span.areas
父级上，因为您希望分发单个
元素
在每个
元素中，当您要定位复选框时，使其垂直居中
当然还有其他的黑客，比如
display:table cell
，但由于flexbox的灵活性（没有双关语），我通常支持它

以下是基于您的代码的概念验证示例：


div.arealist{
显示：块；
明确：两者皆有；
边缘顶端：40px；
}
/*跨度。具有flexbox的区域，
因此，我们可以分发标签组
*/
分区列表>范围{
显示器：flex；
柔性包装：包装；
填充：25px；
}
/*每个标签也要有flexbox，
所以我们可以将复选框垂直居中
*/
分区列表>范围标签{
显示器：flex；
对齐项目：居中；
文本对齐：居中；
}
分区区域列表>跨度区域{
宽度：300px；
边框：1px实心#d0；
}

项目
1
项目2
项目3
项目4
项目5
项目6
项目7
使用此

div.arealist>span label {
    display: inline-block;
    text-align: center;
    float: left;
    height: 30px;
    padding: 5px;

}
使用这个

div.arealist>span label {
    display: inline-block;
    text-align: center;
    float: left;
    height: 30px;
    padding: 5px;

}
添加
文本对齐：居中
如下

div.arealist>span标签{显示：内联块；文本对齐：中心}

演示
添加
文本对齐：居中
如下

div.arealist>span标签{显示：内联块；文本对齐：中心}

Demo
@T.J.Crowder：我已经更新了块。谢谢你的评论。这和javascript有什么关系？@nowhohomasnotbennamed：不用担心。不过，请务必注意下次制作一个堆栈片段，就像特里在回答中所做的那样。它是工具栏上的
[]
按钮。让人们更容易发现问题并帮助你解决问题。@T.J.Crowder：当然，今天学到了一些新东西。@T.J.Crowder：我已经更新了模块。谢谢你的评论。这和javascript有什么关系？@nowhohomasnotbennamed：不用担心。不过，请务必注意下次制作一个堆栈片段，就像特里在回答中所做的那样。它是工具栏上的
[]
按钮。让人们更容易发现问题并帮助你解决问题。@T.J.Crowder：当然，今天学到了一些新东西。这看起来不像老年退休金计划想要的结果。为什么不指定
垂直对齐：中间；text align:center
与标签对齐这里是让它看起来像OP想要的。@MrLister:正是我需要的：）你能发布一个答案让我接受吗？@MrLister我尝试了你的建议，看起来效果不错。当为标签设置样式也会影响复选框时，怎么会发生这种情况？@Pengyy关于垂直对齐的问题的答案是，一行中的元素总是彼此对齐。在中，第二个跨距的字体较大，这会导致第一个跨距向下移动以匹配基线。这就是它的工作原理，看起来不像是OPs想要的结果。为什么不指定
垂直对齐：中间；文本对齐：居中对齐