Css 将搜索按钮添加到文本输入

我是CSS新手，今天我想在我的

导航栏文本框中添加搜索按钮

所以我试着这样做：


*{
框大小：边框框；
}
身体{
字体系列：“蒙特塞拉特”，无衬线；
边际：0px；
}
.章节标题{
颜色：#2ddf5c；
}
.主标题{
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
宽度：100%；
背景：#2ddf5c；
填充：16px；
}
.主标题>div{
垂直对齐：中间对齐；
}
.main-header__品牌{
颜色：#0e4f1f；
文字装饰：无；
字体大小：粗体；
字体大小：20px；
}
.main-nav\u搜索栏\u容器{
显示器：flex；
宽度：100%；
左侧填充：40px；
溢出：隐藏；
垂直对齐：中间对齐；
空白：nowrap；
}
.main-nav\u搜索栏\u容器输入。main-nav\u搜索栏{
宽度：100%；
高度：50px；
/*背景#2b303b*/
边界：无；
字号：10pt；
浮动：左；
/*颜色：#fff*/
左侧填充：15px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
.main-nav\u搜索栏\u容器输入。main-nav\u搜索栏：：-webkit输入占位符{
颜色：#65737e；
}
.main-nav_u搜索栏\u容器输入.main-nav_u搜索栏：-moz占位符{/*Frefox 18*/
颜色：#65737e；
}
.main-nav_搜索栏_容器输入。main-nav_搜索栏：：-moz占位符{/*Frefox 19*/
颜色：#65737e；
}
.main-nav\u搜索栏\u容器输入。main-nav\u搜索栏：-ms输入占位符{
颜色：#65737e；
}
.main-nav\u搜索栏\u容器按钮.icon{
-webkit边框右上角半径：5px；
-webkit边框右下半径：5px；
边框右上角半径：5px；
边框右下半径：5px；
边界：无；
背景:#232833；
高度：50px；
宽度：50px；
颜色：#4f5b66；
不透明度：0；
字号：10pt；
-webkit过渡：全部.55秒轻松；
-moz过渡：所有.55秒轻松；
-ms过渡：全部.55秒轻松；
-o型过渡：全部.55秒缓解；
过渡：全部.55秒轻松；
}
.main-nav\u搜索栏\u容器：悬停按钮.icon，
.main-nav\u搜索栏\u容器：活动按钮.icon，
.main-nav\u搜索栏\u容器：焦点按钮.icon{
大纲：无；
不透明度：1；
左边距：-50px；
}
.main-nav\u搜索栏\u容器：悬停按钮。图标：悬停{
背景：红色；
}
.主导航搜索栏{
显示器：flex；
宽度：100%；
利润率：8px；
填充：8px；
边框：2倍实心；
边界半径：4px；
大纲：无；
过渡：.3s；
}
.主导航{
显示器：flex；
宽度：100%；
文本对齐：右对齐；
利润率：0.10px；
}
.主导航项目{
显示器：flex；
利润率：8px；
填充：8px；
列表样式：无；
}
.主导航项目{
显示：内联块；
}
.main-nav___社会{
显示：块；
宽度：20px；
高度：20px；
左边距：10px；
}
.另一个集装箱{
保证金：自动；
宽度：100%；
填充：10px；
}

CSS课程






对于按钮对齐，它需要与其同级
具有相同的边距。main-nav\uu搜索栏
，或者，您可以对paren't
。main-nav\uu搜索栏
容器应用填充，而不是对两个子容器都应用边距

按钮对齐的css

.main-nav__searchbar_container button.icon {
  margin-top: 8px;
}

用于在悬停时向输入添加边框的css

input.main-nav__searchbar:hover {
    border: 2px solid blue;
}

尝试将按钮和文本框包装在一个容器内，并垂直和水平对齐到中心。对于边框，可以使用outine css属性