因此，我尝试创建一个导航栏，其标题位于中心，按钮显示在右侧。正如您所看到的，当我尝试执行此操作时，按钮出现在下一行并位于 div 之外：
Fiddle https://jsfiddle.net/ck18vjpn/1/
.title-bar {
background-color: #48A6B8;
font-style: italic;
margin-bottom: 3%;
color: #fff;
}
.title {
text-align: center;
font-size: 36px;
line-height: 180%;
}
.buts {
float: right;
}
<div class="title-bar">
<div class="title">Title</div>
<div class="button">
<button class="buts">Whats Up</button>
</div>
</div>
display:inline-block似乎删除了文本的居中，所以我不能使用它......
提前致谢！
Use flexbox
flex: 1 0 auto;将使title灵活，它将获取所有可用的空闲空间弹性容器 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flexible_Boxes_Vocabulary.
.title-bar {
background-color: #48A6B8;
font-style: italic;
margin-bottom: 3%;
color: #fff;
display: flex;
}
.title {
text-align: center;
font-size: 36px;
line-height: 180%;
flex:1 0 auto;
}
<div class="title-bar">
<div class="title">Title</div>
<div class="button">
<button class="buts">Whats Up</button>
</div>
</div>
编辑：在@burak 评论说它不完全在中心位置之后。
As you can see in the below image, some of the space is acquired by the Whats Up button, that's why title is not in the exact center but Text is in the exact center of it's parent.
We can make it in exact center as well, but for that we'll need to shift Whats Up button on another layer, by using position:absolute
.title-bar {
background-color: #48A6B8;
font-style: italic;
margin-bottom: 3%;
color: #fff;
display: flex;
position:relative;
}
.title {
text-align: center;
font-size: 36px;
line-height: 180%;
flex:1 0 auto;
background:rgba(0,0,0,.5)
}
.button{
position:absolute;
right:0;
top:0;
}
<div class="title-bar">
<div class="title">Title</div>
<div class="button">
<button class="buts">Whats Up</button>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
