Dynamische Suchleiste relativ

Question

Ich war gespannt, wie das gemacht wird div, ich habe etwas Ähnliches zum Beispiel gemacht

<div class="header-con"> 
    <div class="search-bar-con"> 
     <input type="text" name="search" class="search-bar"> 
     <input type="submit" name="search-submit" class="search-btn"> 
    </div> 

    <div class="function-con"> 

    <div class="func-btn">Home</div> 
    <div class="funct-btn">About</div> 

    </div> 
</div> 

Die Suchleiste Container und Funktion Behälter sind zueinander sowohl relativ, Inline-Block mit, so dass sie brechen nicht ab.

.search-bar-con { 
    position: relative; 
    left: 0px; 
    top: -13px; 
    width: 43%; 
    height: 80%; 
    display: inline-block; 
    margin: 0; 
    min-width: 105px; 
    padding: 0; 
    flex: 1 1 auto; 
    justify-content: flex-start; 
    margin-left: 10px; 
} 

.function-con { 
    position: relative; 
    top:10%; 
    width: auto; 
    height: 80%; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

Meine Absicht ist, die Funktion Container eine feste Breite, aber die Suche Container dynamisch in Bezug auf die Seitenbreite und die Position des Funktionsbehälters zu halten. Momentan bricht der Funktions-Container ab, wenn nicht genug Platz ist, da die Suchleiste die Breite nicht ändert, um Platz zu lassen. Ich habe Medienabfragen verwendet, ist aber nicht so flüssig und einfach wie das oben abgebildete.

Danke.

Answer 1

Für diese Situationen Flex-Box ist der beste Weg. Auf diese Weise .function-con die div, die die blieb Raum der Reihe füllen muss, hat die Eigenschaft flex: 1;

.header-con{ 
 
    display: flex; 
 
    } 
 
.search-bar-con { 
 
\t left: 0px; 
 
\t top: -13px; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t justify-content: flex-start; 
 
\t margin-left: 10px; 
 
} 
 
    
 

 
.function-con { 
 
\t position: relative; 
 
\t top: 10%; 
 
\t width: auto; 
 
\t height: 80%; 
 
\t display: inline-block; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t flex: 1; 
 
\t display: flex; 
 
\t padding: 0 20px; 
 
}

<div class="header-con"> 
 
    <div class="search-bar-con"> 
 
     <input type="text" name="search" class="search-bar"> 
 
     <input type="submit" name="search-submit" class="search-btn"> 
 
    </div> 
 

 
    <div class="function-con"> 
 

 
    <div class="func-btn">Home</div> 
 
    <div class="funct-btn">About</div> 
 

 
    </div> 
 
</div>

Wahrscheinlich wollen Sie Ihre Menüs sind nebeneinander. Wenn Sie nicht möchten, entfernen Sie die display: flex; von div.function-con.

Answer 2

Ich denke, wenn Sie Ihre min-width: 105px in .search-bar-con in ändern: max-width: 105px, die die Arbeit macht. max-width wird zur Skalierung auf mobilen Geräten oder in diesem Fall Ihrem Browser-Fenster verwendet.