divへの動的検索バー

Question

これはどのように行われたのか不思議でした。

<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> 

検索バーのコンテナと機能のコンテナは、彼らが折れないように、インラインブロックを使用して、両方の互いに相対的なものです。

.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; 
} 

私の意図は、ファンクション・コンテナに固定幅が、ページ幅に関しての動的検索コンテナおよび機能コンテナの位置を維持することです。現時点では、検索バーがスペースを残すのに十分な幅を変更しないので、十分なスペースがない瞬間に関数コンテナが破棄されます。私はメディアクエリを使用していますが、上記のgifと同じくらい滑らかではありません。

ありがとうございました。

Answer 1

フレックスボックスが最適です。このように、行の残ったスペースを埋める必要がありDIV .function-conは、おそらくあなたは、あなたのメニューが並んでいるしたいプロパティ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>

を持っています。必要がない場合はdisplay: flex;をdiv.function-conから削除してください。

Answer 2

を.search-bar-conに変更すると、そのジョブを実行するのはmax-width: 105pxとなります。 max-widthは、モバイルデバイス（この場合はブラウザウィンドウ）のスケーリングに使用されます。