使用html将下拉列表放在搜索栏内

HTML代码

   <select class="dropdown" id="alphalist">   
     <option value="a">A</option>   
     <option value="b">B</option>
     <option value="c">C</option>
   </select> <br/> <br/>
 
   <div class="search_bar">
     <input class="search_nav" type="text" placeholder="Search..."/>        
     <span class="fa fa-search"></span>   
   </div>

因此，我在这里创建了一个下拉列表，其中包含选项a、B和C。然后创建了一个搜索栏，还添加了一个搜索图标

CSS代码用于自定义下拉列表和搜索栏

现在我需要将下拉列表放置在左侧的搜索框中，并将搜索按钮放置在右侧。所以在最后，它应该看起来像： 请帮帮我

---

感谢阅读。

只需将它们放在一个div中，并将该div的display属性设置为grid或flex； 并指定空间： 如果网格：使用网格列模板，并使用fr或fix像素（根据您的喜好）。 如果是flex：使用flex增长/flex收缩/或固定像素

---

实际上，有很多方法可以做到这一点，但这些选项是最简单的。

只需将它们放在一个div中，并将该div的display属性设置为grid或flex； 并指定空间： 如果网格：使用网格列模板，并使用fr或fix像素（根据您的喜好）。 如果是flex：使用flex增长/flex收缩/或固定像素

事实上，有很多方法可以做到这一点，但这些选择是最简单的

 .dropdown { width: 30px;     /* customize Select tag(DropDown options) with id="alphalist" */
             display: inline-block;
             background-color: #F5F5F5;
             border-radius: 10px;
             outline: none;
             transition: all .5s ease;
             position: relative;
             vertical-align: center;
             font-size: 15px;
             color: black;
             height: 30px;
           } 

 input { border: 0;
         background-color: #F5F5F5;
         border-radius: 10px;
         -webkit-appearance: none;
         -moz-appearance: none;
         -ms-appearance: none;
         -o-appearance: none;
         appearance: none;
         text-align: left;
         width: 100%;
         height: 32px;        
       }