Html 将图标与简单搜索栏对齐

我正在编辑一个简单的搜索栏。我的计划是在搜索栏上方有两个按钮，它们是响应的。一个按钮向右浮动，一个按钮向左浮动

然而，我似乎无法让按钮停止显示，因为它们没有与搜索栏对齐，几乎“脱离了它的容器”

代码：

.container{
浮动：中心；
文本对齐：居中；
宽度：100%；
溢出：隐藏；
}
#法利斯特，福普洛德{
显示：内联块；
位置：相对位置；
字体大小：25px；
}
#法利斯特{
浮动：左；
}
#福普洛德{
浮动：对；
}
输入{
边框：1px实心#F1F；
宽度：90%；
边界半径：3px；
高度：35px；
}
span.clear{clear:left；display:block；}

搜寻

这里有一种使用flexbox的方法，使用更少的CSS和HTML代码

.container，
.图标{
显示器：flex；
柔性包装：包装；
宽度：100%
}
.图标{
调整内容：之间的间距
}
.搜索栏{
弹性：1
}
#搜索框{
宽度：100%；
}

---

这里有一种使用flexbox的方法，使用更少的CSS和HTML代码

.container，
.图标{
显示器：flex；
柔性包装：包装；
宽度：100%
}
.图标{
调整内容：之间的间距
}
.搜索栏{
弹性：1
}
#搜索框{
宽度：100%；
}

---

从

span.clear

下面的片段

.container{
浮动：中心；
文本对齐：居中；
宽度：100%；
溢出：隐藏；
垂直对齐：顶部；
}
#法利斯特，福普洛德{
显示：内联块；
位置：相对位置；
字体大小：25px；
}
#法利斯特{
浮动：左；
}
#福普洛德{
浮动：对；
}
输入{
边框：1px实心#F1F；
宽度：90%；
边界半径：3px；
高度：35px；
}
span.clear{display:block；}

搜寻

从

span.clear

下面的片段

.container{
浮动：中心；
文本对齐：居中；
宽度：100%；
溢出：隐藏；
垂直对齐：顶部；
}
#法利斯特，福普洛德{
显示：内联块；
位置：相对位置；
字体大小：25px；
}
#法利斯特{
浮动：左；
}
#福普洛德{
浮动：对；
}
输入{
边框：1px实心#F1F；
宽度：90%；
边界半径：3px；
高度：35px；
}
span.clear{display:block；}

搜寻

这样可以使它们位于红色框所在的顶部。如果不完全正确，就调整它们

---

这样可以使它们位于红色框所在的顶部。如果不完全正确，只需调整它们。

我通过在元素

中添加以下代码来解决此问题。icons

希望有帮助

.icons{
    margin: 0 31px;
}

.container{
浮动：中心；
文本对齐：居中；
宽度：100%；
溢出：隐藏；
}
#法利斯特，福普洛德{
显示：内联块；
位置：相对位置；
字体大小：25px；
}
#法利斯特{
浮动：左；
}
#福普洛德{
浮动：对；
}
输入{
边框：1px实心#F1F；
宽度：90%；
边界半径：3px；
高度：35px；
}
span.clear{clear:left；display:block；}
.图标{
利润率：0.31px；
}

搜寻

我通过在元素

中添加以下代码成功解决了这个问题。icons

希望它能有所帮助

.icons{
    margin: 0 31px;
}

.container{
浮动：中心；
文本对齐：居中；
宽度：100%；
溢出：隐藏；
}
#法利斯特，福普洛德{
显示：内联块；
位置：相对位置；
字体大小：25px；
}
#法利斯特{
浮动：左；
}
#福普洛德{
浮动：对；
}
输入{
边框：1px实心#F1F；
宽度：90%；
边界半径：3px；
高度：35px；
}
span.clear{clear:left；display:block；}
.图标{
利润率：0.31px；
}

搜寻

选项1： 。将容器的内部元素用另一个包裹，并在该元素上设置边距。 备选案文2： 在代码段中，将边距应用于图标，并输入自身。我在你的代码片段中添加了3行代码

.container{
浮动：中心；
文本对齐：居中；
宽度：100%；
溢出：隐藏；
}
#法利斯特，福普洛德{
显示：内联块；
位置：相对位置；
字体大小：25px；
}
#法利斯特{
浮动：左；
左边距：35px；/*1）从侧面移动第一个图像*/
}
#福普洛德{
浮动：对；
右边距：35px；/*2）从右侧移动第二个图像*/
}
输入{
边框：1px实心#F1F；
宽度：calc（100%-70px）；/*3）100%-100%您希望输入周围有多少余量*/
边界半径：3px；
高度：35px；
边距：0 35px；/*4）将边距应用于输入*/
}
span.clear{clear:left；display:block；}

选项1： 。将容器的内部元素用另一个包裹，并在该元素上设置边距。 备选案文2： 在代码段中，将边距应用于图标，并输入自身。我在你的代码片段中添加了3行代码

.container{
浮动：中心；
文本对齐：居中；
宽度：100%；
溢出：隐藏；
}
#法利斯特，福普洛德{
显示：内联块；
位置：相对位置；
字体大小：25px；
}
#法利斯特{
浮动：左；
左边距：35px；/*1）从侧面移动第一个图像*/
}
#福普洛德{
浮动：对；
右边距：35px；/*2）从右侧移动第二个图像*/
}
输入{
边框：1px实心#F1F；
宽度：calc（100%-70px）；/*3）100%-100%您希望输入周围有多少余量*/
边界半径：3px；
高度：35px；
边距：0 35px；/*4）将边距应用于输入*/
}
span.clear{clear:left；display:block；}

您可以重新排列html吗？您是否尝试为

图标类设置
左边距
和
右边距
？您可以重新排列html吗？您是否尝试为
图标设置
左边距
和
右边距