导航栏的标题在中心，按钮右移

Question

所以我试图创建一个标题在中心的导航栏和一个出现在右边的按钮。正如你所看到的，当我试图做到这一点，该按钮会出现在下一行进出的div：

Fiddle

.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似乎去除的定心文字，所以我不能用...

在此先感谢！

Answer 1

使用flexbox

flex: 1 0 auto;会让title灵活，将收购flex-container所有的可用空间。

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

Answer 2

我用于标题栏Flexbox的，并让在左侧所需的保证金来自动计算。

.title-bar { 
 
    display: flex; 
 
    justify-content: center; 
 
    width: 100%; 
 
} 
 

 
.title, .button { 
 
    margin-left: auto; 
 
}

<div class="title-bar"> 
 
    <div class="title">Title</div> 
 
    <div class="button"> 
 
    <button class="buts">Whats Up</button> 
 
    </div> 
 
</div>

Answer 3

使用显示：内联;所以标题和按钮都会出现在同一行上。