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由一个带有“容器”类的div包围。以下是检查器中显示的样式：

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

容器被包裹在体内。这是每个检查员的身体风格：

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

检查员还显示正文的样式是块（来自用户代理样式表）。

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

Answer 1

我会使用flex

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

以下是一些学习flex的好网站及其可以做的事情：

Flexbox codepen playground

Css Tricks - Complete guide to flexbox

CSS浮动：右转到下一行

1 个答案: