ein div mit einem Zentrum ausgerichtet Div und ein Recht positioniert div

Question

Ich habe ein div-Element (.shop-bar), die 100% der Bildschirmbreite und feste Position ist. Ich möchte zwei divs darin; der erste (.search-bar) soll 50% des Eltern- und Mittelpunkts (vollendet) sein, der zweite (.cart) soll rechts vom Bildschirm sein (und der Elternteil) [Problem].

HTML:

<div class="search"> 
    <div class="search-bar"> 
    <input type="text" id="searchbox" placeholder="Search"><button><i class="fa fa-search"></i></button> 
    </div> 

    <div class="cart"> 
    <i class="fa fa-shopping-cart"></i> 
    </div> 
</div> 

CSS:

.search { 
    position: fixed; 
    left: 0; 
    right: 0; 
    background-color: blue; 
} 

#searchbox { 
    color: #f0a830; 
    border: none; 
    font-size: 28px; 
    outline: none; 
    background-color: #202020; 
    border-radius: 5px 0 0 5px; 
} 

.search-bar input { 
    width: 90%; 
} 

.search-bar button { 
    background-color: #202020; 
    border: none; 
    font-size: 28px; 
    outline: none; 
    border-radius: 0 5px 5px 0; 
    width: 10%; 
} 

.cart { 
    display: inline-block; 
    color: white; 
    font-size: 32px; 
} 

Ich habe versucht, die .cart rechts schwimmen, aber es bewegt sich die .cart in die nächste Zeile. Ich habe ein Display gemacht: Inline-Block und alle Variationen. Der Inline-Block ermöglicht es, ihn in die von mir gewünschte Position zu bewegen, aber er ist nicht wirklich in der div; eher wie auf der Oberseite schwimmen. Wie kann ich es rechts vom Elternteil bekommen?

Answer 1

Sie können den Display-Inline-Block in einem Container mit Text-Align-Center verwenden.

<div class="wrapper"> 
    <div class="rightalign">right content</div> 
    <div class="centeralign">center content</div> 
</div> 

<style> 
    .wrapper{ text-align:center; } 
    .centeralign, .rightalign { width:200px;height:100px; } 
    .centeralign{ display:inline-block;background:#ccf; } 
    .rightalign{ float:right;background:#fcc; } 
</style> 

Eine andere Lösung wäre, ein mehrspaltiges Layout zu erstellen.