搜索框css问题

Question

问题描述

今天在做搜索框的时候遇到一个问题,具体见代码,左右两块都用的浮动来做,但是为什么没有填充满,会有一个小黑条呢?

问题出现的环境背景及自己尝试过哪些方法

我知道,如果把背景色和边框设置为一样的颜色就可以解决,就是想知道,为什么会显现这个小黑条

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

.search-bar {    width:600px;    border: 2px solid #dd182b;    background: black;
}.search-bar input,.search-bar button {    border: 0px;    padding: 10px;    float: left;    display: block

}.search-bar input {    width: 80%;
}.search-bar button {    /* outline: none; */
    width: 20%;    background: #dd182b;    color: #fff;
}

    <div class="search-bar">        <input type="text" name="" value="">
        <button type="button" name="button">搜索</button>
    </div>

你期待的结果是什么？实际看到的错误信息又是什么？

就是右边的这个小黑边

Answer 1

*{  padding: 0;  margin: 0;  box-sizing: border-box; } 把盒模型更改一下