導航欄的標題在中心，按鈕右移

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

使用顯示：內聯;所以標題和按鈕都會出現在同一行上。