一个搜索框制按键标签上老是有缝隙放大缩小浏览器时有时是正常的有时还是有缝

Question

 <div class="search">

            <input type="search" name="" id="" placeholder="搜索">

            <button>搜索</button>

        </div>

.search {

    position: absolute;

    left: 346px;

    top: 25px;

    width: 538px;

    height: 36px;

    border: 2px solid #b1191a;

}



.search input {

    float: left;

    width: 454px;

    height: 32px;

    padding-left: 10px;

    vertical-align: middle;

}

.search button {

    float: left;

    width: 80px;

    height: 32px;

    background-color: #b1191a;

    color: rgb(248, 247, 247);

}

Answer 1

使用 flex布局吧，在  search内设置合适的width大小、设置display: flex;

/**设置 input 和 button*/

 search input {

flex: 2;

text-align: right;

}

search button {

flex: 1;

text-align: left;

}

flex: 1;flex: 2;的意思是在 search中分成三等份，input占两份的位置，button占一份的位置，根据需要调整代销就行