为什么添加CSS后两个html元素没有对齐？

#四个{
显示器：flex；
对齐项目：柔性端；
弯曲方向：立柱；
证明内容：周围的空间；
}
.输入{
高度：1.8vw；
宽度：10vw；
最小高度：20px；
最小宽度：120px；
边界半径：1.5vw/100%；
边界：无；
左侧填充：10px；
利润率：10px；
}
.输入，开始{
宽度：2.3vw；
高度：1.8vw；
边界半径：1.5vw/100%；
背景色：hsl（12,88%，59%）；
颜色：白色；
字体大小：0.7vw；
显示：内联块；
}

去
版权所有2020。版权所有

尝试

弹性方向：行很好


#四个{
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
}
.输入{
高度：1.8vw；
宽度：10vw；
最小高度：20px；
最小宽度：120px；
边界半径：1.5vw/100%；
边界：无；
左侧填充：10px；
利润率：10px；
}
.输入，开始{
宽度：2.3vw；
高度：1.8vw；
边界半径：1.5vw/100%；
背景色：hsl（12,88%，59%）；
颜色：白色；
字体大小：0.7vw；
显示：内联块；
}

去
版权所有2020。版权所有


我在这里用最少的代码复制了正确的结果。你可以按照自己的方式来设计，自己也可以看到问题所在

HTML代码

body{
  background:black;
}
#four {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
}
input[type='text']{
  padding:7px;
  margin-right:5px;
  border-radius:14px;
  border:none;
}
.go{
  padding:5px;
  border-radius:14px;
  background:#f64;
  color:white;
}
p{
  color:white;
}



去
版权所有2020。版权所有


CSS代码

body{
  background:black;
}
#four {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
}
input[type='text']{
  padding:7px;
  margin-right:5px;
  border-radius:14px;
  border:none;
}
.go{
  padding:5px;
  border-radius:14px;
  background:#f64;
  color:white;
}
p{
  color:white;
}


嗨，我更改了你的
css
代码，它就正常工作了。您应该在.go
css
中更改
display:inline


#四个{
显示器：flex；
对齐项目：柔性端；
弯曲方向：立柱；
证明内容：周围的空间；
}
.输入{
高度：1.8vw；
宽度：10vw；
最小高度：20px；
最小宽度：120px；
边界半径：1.5vw/100%；
边界：无；
左侧填充：10px；
利润率：10px；
}
.输入，开始{
宽度：2.3vw；
高度：1.8vw；
边界半径：1.5vw/100%；
背景色：hsl（12,88%，59%）；
颜色：白色；
字体大小：0.7vw；
显示：内联；
}


去
版权所有2020。版权所有

我根据您的代码创建了一个片段，它与您提供的图片不一样。你能更新代码片段以便我们重现你的问题吗？