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

如图，求解

img

下面是我写的

img

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

差不多这样

img


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


 <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .a1{
            margin-top: 1px;
        border: none;
        margin-bottom: -10px;
        letter-spacing: 2px;
         position: fixed; 
         left: 170px; 
        border-left: 1px solid black;
        width:80px;
        height:49px;
        }
        .w1{
        border:1px solid black;
        width:250px;
        height:50px;
        border-top-left-radius:40px;
        border-bottom-left-radius: 40px;
    }

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

img