html - 相对于 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 Container 和 function container 都是相对的，使用 inline-block 所以它们不会中断。

  .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

对于这些情况，Flex box 是最好的方法。这样，必须填充行剩余空间的 div .function-con 具有属性 flex: 1;

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

.function-con {
	position: relative;
	top: 10%;
	width: auto;
	height: 80%;
	display: inline-block;
	margin: 0;
	padding: 0;
	flex: 1;
	display: flex;
	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;。