Position Suchleiste auf der rechten Seite von div und zentrierte

Question

ich eine Suchleiste in einem div positionieren will, so dass es so etwas wie folgt aussieht:

Im Moment ist es nicht einmal innerhalb des div sitzen.

HTML:

.sb-search { 
 
    float: right; 
 
    overflow: hidden; 
 
} 
 

 
.sb-search-input { 
 
    border: none; 
 
    outline: none; 
 
    background: #fff; 
 
    width: 100%; 
 
    height: 60px; 
 
    margin: 0; 
 
    z-index: 10; 
 
    padding: 20px 65px 20px 20px; 
 
    font-family: inherit; 
 
    font-size: 20px; 
 
    color: #2c3e50; 
 
}

<div class="searchbar" style="position: relative;"> 
 
    <h1>Welcome Solictior...</h1> 
 
    <div id="sb-search" class="sb-search"> 
 
    <form> 
 
     <input class="sb-search-input" placeholder="Search..." type="text" value="" name="search" id="search" /> 
 
     <input class="sb-search-submit" type="submit" value="" /> 
 
     <span class="sb-icon-search"></span> 
 
    </form> 
 
    </div> 
 
</div>

Answer 1

Es ist sehr einfach, mit Flexbox

.searchbar { 
    background-color: #8BCAC7; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 

https://jsfiddle.net/cb3fu9wj/

zu tun

gibt die Ausrichtung entlang der Hauptachse an. Es definiert, wie der freie Speicherplatz zwischen Elementen verteilt wird.

align-items gibt die Ausrichtung entlang der Querachse an.

Hier ist die complete guide.

Answer 2

Ich denke, Ihr Problem ist hier die h1 wie es ein Block-Level-Element ist.

Fügen Sie dies Ihrem h1 CSS hinzu und es sollte die Suchleiste rechts davon gehen lassen. Auch

h1 { 
    display: inline-block; 
} 

die float: right; auf Ihrem .sb-search Element halten.

Answer 3

Hier ist ein mögliches Beispiel von dem, was Sie suchen: See this fiddle

CSS:

.searchbar { background-color: teal; color: #fff; overflow: hidden; padding: 0 10px;} 
.searchbar .sb-search { float: right; margin: 5px 0; } 
.searchbar h1 { float: left; font-size: 14px; margin: 10px 0 5px; }