关于web的问题：两个文本框中间怎么合到一起

Question

如图，求解

下面是我写的

.w1{
        border:1px solid black;
        width:250px;
        height:50px;
        border-radius:40px;
    }

 <input type="text" placeholder="在这里搜索" class="w1">
<select class="w1">
    <option>配件</option>
    <option>配件1</option>
    <option>配件2</option>
    <option>配件3</option>
</select> 

Answer 1

差不多这样

<style>
    .searchBox{
        border:1px solid black;
        width:250px;
        height:50px;
        border-radius:40px 0 0 40px;
        overflow: hidden;
    }
    .searchBox .w1{
        width: 150px;
        height: 50px;
        border:none;
        padding: 0 10px;
        box-sizing: border-box;
        float: left;
    }
    .searchBox .w2{
        width: 100px;
        height: 50px;
        border:none;
        padding: 0 10px;
        box-sizing: border-box;
        float: right;
        border-left:1px solid #ccc
    }
    </style>
 <div class="searchBox">
 
 <input type="text" placeholder="在这里搜索" class="w1">
<select class="w2">
    <option>配件</option>
    <option>配件1</option>
    <option>配件2</option>
    <option>配件3</option>
</select>     
 </div>