動態搜索欄相對於div

我很好奇這是如何完成的，我做了類似的例如

<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那樣流暢或簡單。

謝謝。

來源

2017-03-08 stepho

對於這些情況柔性盒是最好的方法。通過這種方式，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>

也許你想你的菜單是並排的。如果你不想要，從div.function-con刪除display: flex;。

來源

2017-03-08 12:42:36

我認爲如果你把你的min-width: 105px.search-bar-con改成：max-width: 105px這個工作。 max-width用於在移動設備上進行縮放，或者在這種情況下用於瀏覽器窗口。

來源

2017-03-08 12:42:23 Gobbin

動態搜索欄相對於div

回答

相關問題