提交按钮和文本输入的独立边距

Question

我不知道为什么，但我的文本输入和提交按钮边距是链接的，所以这很难看，也很烦人。

我在我的主html文件上有这个：

.banner {
width: 100%;
height: 100px;
display: inline-flex;
margin: 0px;
background-color: #1b2936;
}
.logo {
width: 200px;
height: 100px;
}
input[type=text] {
background-color: #10151b;
border: #10151b 5px solid;
border-radius: 7px;
height: 50px;
width: 500px;
color: white;
font-family: jetbrainsRegular;
}
.search {
width: 50px;
height: 50px;
}
.searchbtn {
margin-top: 0px;
border: #1fa2f3 5px solid;
border-radius: 30px;
background-color: #1fa2f3;
}
.nomargin {
margin-top: 0;
}

<div class="banner">
<img class="logo" src="logo.png">
<form action="query.php">
<label>
<input type="text" id="query" placeholder="Mot" class="nomargin">
</label>
<label>
<button type="submit" class="searchbtn"><img src="search.png" class="search"/></button>
</label>
</form>
</div>

我正在寻找一种方法来取消链接他们的利润。。。

Answer 1

没有余量，这是表单的问题。试试这个：

form{
display:flex;
}

或者(但我不推荐(：

input[type=text]{
float:left;
}

Flex给了你更多的灵活性(双关语(，而且它更容易使用。https://css-tricks.com/snippets/css/a-guide-to-flexbox/