CSS float :right goes to next line

Question

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

searchbar-title-group 应该占据一整行，包含一个左对齐的标题和 2 个右对齐的按钮。按钮组是右对齐的，但它出现在下一行。为什么？我应该如何解决这个问题？

#searchbar-add-item {
  font-size: 24px;
}

#searchbar-title {
  font-size: x-large;
  visibility: visible;
  white-space: nowrap;
}

#searchbar-title-buttons-group {
  float: right;
}

#searchbar-title-group {
  display: block;
}

#searchbar-toggle-button {
  font-size: 24px;
}

<div class="searchbar-title-group">
  <span class="" id="searchbar-title">Search Entries.</span>
  <span id="searchbar-title-buttons-group">
			<a href="#" id="searchbar-toggle-button" class="material-icons md-48 md-dark">search</a>
			<a href="/transactions/new" id="searchbar-add-item" class="material-icons md-48 md-dark">add_box</a>
		</span>
</div>

编辑:searchbar-title-group 包含在类为“container”的 div 中。这是检查器中显示的样式:

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

容器包裹在主体中。这是每个检查员的 body 风格:

body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

检查器还显示 body 的样式是 block (来自用户代理样式表)。

检查员还显示 .container从 <div> 的用户代理样式表继承 block 样式.我不知道那是怎么分配的。

Answer 1

我会用flex

#searchbar-add-item {
  font-size: 24px;
}

.searchbar-title-group {
  width:100%;
  display:flex;                   /* flex */
  flex-direction: row;            /* layout children in a row */
  flex-wrap:nowrap;               /* don't let children wrap */
  justify-content:space-between;  /* add space in between children so whole line is taken */
}

#searchbar-title {
  font-size: x-large;
  white-space: nowrap;
}


#searchbar-toggle-button {
  font-size: 24px;
}

<div class="searchbar-title-group">
  <span class="" id="searchbar-title">Search Entries.</span>
  <span id="searchbar-title-buttons-group">
	<a href="#" id="searchbar-toggle-button" class="material-icons md-48 md-dark">search</a>
	<a href="/transactions/new" id="searchbar-add-item" class="material-icons md-48 md-dark">add_box</a>
  </span>
</div>

这里有几个学习 flex 及其功能的好网站:

Flexbox codepen playground

Css Tricks - Complete guide to flexbox