Html 换行符a<；标签>；使用CSS

我在引导列中有多个复选框，用作地图标记的过滤器

我使用一个空的

元素来显示一个彩色正方形，然后是实际的复选框，最后是一个带有过滤器名称的

<div class="row">
    <div class="map-legend-box" style="background: #42bcf4"></div>
    <input type="checkbox"/>
    <label class="control-label checkbox-label-align">Some text here</label>
</div>

这里有一些文字

当标签包含很长的过滤器名称时，标签将显示在第二行，而我希望它显示在第一行，如果它不适合第一行，则断开到第二行

我尝试了将

换行

/

分词

/

空白

属性与CSS进行不同的组合，但无法使其工作

我已经创建了一个关于目前情况的模型

如何使用CSS使它看起来像下面的模型图片

---

您必须将

.map图例框

移动到

标签

内，并将其放置在

绝对

位置。然后在左侧添加一点

填充

，为

地图图例框

腾出空间

.row{
最大宽度：200px；
}
标签{
显示：块；
位置：相对位置；
左侧填充：45px；
}
.地图图例框{
宽度：20px；
高度：20px；
}
.盒式集装箱{
位置：绝对位置；
排名：0；
左：0；
}
.盒式集装箱*{
显示：内联块；
}

Lorem ipsum dolor sit amet，奉献精英。除此之外，我们还需要一位专家，一位名叫德比蒂斯·特尼乌尔（voluptatibus deletus debitis teniteur）的专家，一位临时劳工临时建筑设计师，一位临时劳工临时建筑设计师。

使用

flex

。这将使工作变得非常容易

.checkbox容器{
宽度：40px；
显示器：flex；
对齐项目：居中；
浮动：左；
}
#方格{
高度：11px；
宽度：11px；
显示：内联块；
边界半径：2px；
}
标签{
显示器：flex；
}

Lorem ipsum dolor sit amet，奉献精英。在这一点上，我们需要一个明确的定义，一个明确的定义，一个明确的定义，一个明确的定义，一个明确的定义，一个可能的建筑设计师。

复选框在哪里？我编辑了我的代码片段。我想你需要一个自定义复选框。有多种解决方案，但目前我将复选框和

.map legend box

包装在

.box container

中，以避免为每个元素设置位置。谢谢，这是我最终使用的，即使

flexbox

可用。代码必须支持IE10，这使得使用

flexbox

@code-Spirit有一个很好的答案，我建议远离flexbox，因为IE和Edge不支持它。Flexbox令人惊叹，应该在任何地方都得到绝对支持，但在它实现之前，不要依赖它。