Html 使用CSS创建搜索栏（按钮未附加到搜索框）

我正在学习如何使用CSS创建搜索栏，遇到了两个问题：

我的按钮在右侧有一个不需要的蓝色间隙（这是因为我试图添加一个箭头以突出左侧）

我尝试了不同的方法来去除大面积的蓝色，但我没有足够的经验来解释为什么会发生这种情况

“搜索”按钮与按钮左侧的栏不相交，它有一个间隙

如果有人对这项事业有想法，请提出来

这是我的代码：

表单{
宽度：500px；
保证金：50px自动；
}
.搜索{
填充：8px 15px；
背景：rgba（50,50,50,0.2）；
边框：1.5px实心#dbdb；
宽度：100px；
}
.按钮{
位置：相对位置；
填充：6.5px15px；
左：-8px；
边框：2个实心#207cca；
背景色：#207cca；
颜色：#fafafa；
}
.按钮：悬停{
背景色：#fafafa；
颜色：#207cca；
}
：-webkit输入占位符{
/*适用于WebKit浏览器*/
颜色：#dd3333；
字体系列：Helvetica Neue；
字体大小：粗体；
}
：-moz占位符{
/*适用于Mozilla Firefox 4至18*/
颜色：#dd3333；
字体系列：Helvetica Neue；
字体大小：粗体；
}
：-moz占位符{
/*适用于Mozilla Firefox 19+*/
颜色：#dd3333；
字体系列：Helvetica Neue；
字体大小：粗体；
}
：-ms输入占位符{
/*对于Internet Explorer 10+*/
颜色：#dd3333；
字体系列：Helvetica Neue；
字体大小：粗体；
}
/*条形箭头干管*/
.阿罗{
位置：相对位置；
背景：#207cca；
填充：8px 8px；
左-8像素；
}
.阿罗：之后{
右：100%；
最高：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
边框颜色：rbga（32,124,202,0）；
右边框颜色：#207cca；
边框宽度：10px；
利润上限：-10px；
}

---

查看以下内容，看看它是否解决了您的问题。最大的问题是

span

正在包装

按钮

HTML:

---

Ps我尝试“使用代码工具栏”发布JSFIDLE链接（出错）。你将不得不复制和粘贴顺便说一句，这个错误是有原因的。。。它试图帮助您在问题中添加代码，从而使问题不会被否决和关闭。这不仅仅意味着被忽视。我建议您阅读。感谢“匿名”提供的建设性意见，我阅读了您的指南，并将继续“提出更好的问题”。没问题，我很高兴您发现它有帮助。

<form >
<input type="text" placeholder="Search..." class= "search"  required>                           
<span class="arrow"></span><input type="button" value="Search" class= "button">
</form>

form {
width:500px;
margin:50px auto;
}
.search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:1.5px solid #dbdbdb;
width:100px;
}
.button {
position:relative;
padding:6.5px 15px;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
}
.button:hover  {
background-color:#fafafa;
color:#207cca;
}
.arrow {
position:relative;
background:#207cca;
padding:;
margin-left:-5px;
}
.arrow:after {
right:100%;
top:50%;
border:solid transparent;
content: " ";
height:0;
width:0;
position: absolute;
border-color:rbga(32, 124, 202, 0);
border-right-color:#207cca;
border-width:10px;
margin-top:-7px;
}