Search box css question

problem description

Today, I encountered a problem when I was doing the search box. For details, see the code. Both the left and right blocks are floated to do it, but why not fill it up? why is there a small black bar?

the environmental background of the problems and what methods you have tried

I know that it can be solved if the background color and border are set to the same color. I just want to know why this little black bar appears

.

related codes

/ / Please paste the code text below (do not replace the code with pictures) 

.search-bar {
    width:600px;
    border: 2px solid -sharpdd182b;
    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: -sharpdd182b;
    color: -sharpfff;
}
    <div class="search-bar">
        <input type="text" name="" value="">
        <button type="button" name="button"></button>
    </div>

what result do you expect? What is the error message actually seen?

is the small black edge on the right

Css html
Apr.11,2021

[CSS] search for combo box styles 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base target="_blank" />
    <title> -  </title>
    <style>
        .search-bar {
            width:600px;
            border: 2px solid -sharpdd182b;
            height: 38px;
        }
        .search-bar input,.search-bar button {
            border: 0px;
            padding: 10px;
            float: left;
        }
        .search-bar input {
            width: 80%;
            box-sizing:border-box;
        }
        .search-bar button {
            width: 20%;
            background: -sharpdd182b;
            color: -sharpfff;
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div class="search-bar">
        <input type="text" name="" value="">
        <button type="button" name="button"></button>
    </div>
    <h2><a href="https://segmentfault.com/q/1010000016022135">css</a></h2>
</body>
</html>

* {

  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

button appears with a border when clicked

https://blog.csdn.net/qq_2694.

putting aside the question, the effect of the code you posted should not be consistent with the picture you posted, right?
if padding is set for input and button, and then set to 80% and 20% respectively under the default box model, both of them cannot occupy one line
problem solving ideas should consider that
box-sizing: border-box;

this style code on the box model should not be able to achieve this effect, right? Add float:left; and display:block? And then it's shown on a line?
for width allocation, add padding/border and set the percentage? Add at least one box-sizing: border-box; to each tag or it won't achieve the desired effect at all 


.search-bar input, .search-bar button 
box-sizing: border-box; 


.search-bar input, .search-bar button 
padding80% 20%  =80%+20%+padding

Previous: Problems encountered in uploading avatars imitating Taobao

Next: After node upgrades a new version, the application cannot exit normally every time.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu