这应该很简单,但我误解了 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 样式.我不知道那是怎么分配的。
最佳答案
我会用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 及其功能的好网站:
关于CSS float :right goes to next line,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48098427/