Navbar mit Titel in der Mitte und Tasten nach rechts

Question

Also versuche ich eine Navbar mit einem Titel in der Mitte und einer Schaltfläche, die auf der rechten Seite erscheint. Wie Sie sehen können, wenn ich es zu tun versuchen, erscheint die Schaltfläche in der nächsten Zeile und aus dem 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 scheint die Zentrierung zu entfernen der Text also kann ich das nicht verwenden ...

Vielen Dank im Voraus!

Answer 1

Verwenden flexbox

flex: 1 0 auto; wird title flexibel machen, wird es all verfügbare freie Speicherplatz in flex-container erwerben.

.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

ich einen Flexbox für die Titelleiste verwendet und die erforderliche Marge auf der linken Seite lassen automatisch berechnet.

.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

Verwenden display: inline; so dass der Titel und die Schaltfläche beide in derselben Zeile erscheinen.