CSS浮动：右转到下一行

这应该很简单，但我误解了CSS的行为

搜索栏标题组应占据一整行，并包含一个左对齐标题和两个右对齐按钮。按钮组右对齐，但显示在下一行。为什么？我该如何解决这个问题

#搜索栏添加项目{
字体大小：24px；
}
#搜索栏标题{
字号：x大号；
能见度：可见；
空白：nowrap；
}
#搜索栏标题按钮组{
浮动：对；
}
#搜索栏标题组{
显示：块；
}
#搜索栏切换按钮{
字体大小：24px；
}

搜索条目。

我会使用flex

#搜索栏添加项目{
字体大小：24px；
}
.搜索栏标题组{
宽度：100%；
显示：flex；/*flex*/
弹性方向：行；/*在一行中布局子项*/
flex-wrap:nowrap；/*不要让孩子们缠绕*/
对齐内容：之间的空格；/*在子项之间添加空格，以便整行都被占用*/
}
#搜索栏标题{
字号：x大号；
空白：nowrap；
}
#搜索栏切换按钮{
字体大小：24px；
}

搜索条目。

在这个flex和grids的时代，我不会使用浮点数——它们不是用来做什么的——我试过flex，这让人困惑。如果有人想发布一个作为答案，我当然愿意使用不同的技术来解决问题。@cale_b，我试过了，按钮在第1行，标题在第2行。如果

span

元素中的任何一个（因此

#searchbar title

或

#searchbar title button group

）会发生这种情况如果有块类型属性，请检查向这些元素声明的任何规则，如

display:block

，它们似乎占据了整个水平宽度，因此彼此堆叠在一起。如果在搜索栏标题上使用float:left，这是否有效？顺便说一句，他们对我来说都在同一条线上。你还做了其他事情吗？虽然我喜欢Flex作为解决方案，但它相当复杂/不直观，你的评论做得很好！此外，我认为在flex中加入关于可变浏览器支持的免责声明仍然是相关的。。。而且需要（可能）使用浏览器前缀…@cale_b Flex现在受到编写它们的公司所支持的所有浏览器的支持。我不喜欢任何人还在为ie8这样的东西编程。如果他们想为不受支持的浏览器编程，那么他们可以自己编写10和11，并且仍然有相当大比例的@JeffMatthews，这是因为您的样式中有

可见性：隐藏
！您应该能够在flex-inline、inline块或块中包含任何类型的元素（我会厌倦flex或inline flex，因为safari存在如上所述的问题）。如果是内联块，请确保标题宽度小于100%。