html中焦点输入按钮与登录按钮的冲突

我有一个登录表单，其代码如下：

.samaraveera{
框大小：边框框；
右：22%；
垫底：3%；
垫面：3%；
显示：块；
利润率：4%；
左：17%；
}
.samaraveera:focus+.errspan{display:none；}
.container-login100-form-btn{
宽度：97%；
利润率最高：2%；
左缘：1%；
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.login100表格btn{
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充：0 20px；
宽度：100%；
高度：35px；
边界半径：3px；
背景：#f2136e；
字体系列：蒙特塞拉特黑体；
字体大小：12px；
颜色：#fff；
线高：1.2；
文本转换：大写；
字母间距：1px；
-webkit转换：所有0.4s；
-o型过渡：均为0.4s；
-moz转换：全部为0.4s；
过渡：全部为0.4s；
}
.login100表单btn：悬停{
背景：#0cc3eb；
}

登录

我想首先尝试使用屏幕中央对齐的容器。之后，您的输入需要在一定的宽度，以阻止他们移动

.container{
位置：固定；
宽度：300px；
高度：300px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
填充：20px；
}
.表格名称{
宽度：300px；
高度：自动；
填充：10px；
}
.表格项目{
宽度：100%；
高度：30px；
边框：1px实心#9292；
边界半径：5px；
显示器：flex；
弯曲方向：行；
对齐项目：居中；
过渡：全部3秒；
边缘底部：10px；
}
.表格项目：关注{
边框：1px实心#ffffff；
}
.图标{
宽度：10%；
高度：30px；
背景色：#f2136e；
}
.form项[类型=文本]，[类型=密码]{
宽度：90%；
背景色：透明；
边界：无；
}
.表格链接{
文本对齐：居中；
边缘底部：20px；
}
.表格连结a{
文本对齐：居中；
文字装饰：无；
颜色：#f2136e；
字体大小：14px；
}
.表格btn{
宽度：100%；
高度：40px；
}
.表格btn[类型=按钮]{
宽度：100%；
高度：40px；
背景色：#f2136e；
边界：无；
颜色：#fff；
边界半径：5px；
}
.表格登记册{
宽度：100%；
高度：40px；
}
.form寄存器[类型=按钮]{
宽度：40%；
高度：40px；
背景色：透明；
边框：2px实心#f2136e；
颜色：#f2136e；
边界半径：5px；
}

登录

| 
新用户？