将图标与简单的搜索栏对齐答案

【问题标题】：Aligning icons to simple search bar将图标与简单的搜索栏对齐
【发布时间】：2017-04-23 20:57:49
【问题描述】：

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

但是，我似乎无法让按钮停止出现，它们没有与搜索栏内联，几乎“超出其容器”。

代码：

.container {
  float: center;
  text-align: center;
  width: 100%;
  overflow: hidden;
}
#falist, #faupload {
  display: inline-block;
  position: relative;
  font-size: 25px;
}
#falist {
  float: left;
}
#faupload {
  float: right;
}
input {
  border: 1px solid #F1F;
  width: 90%;
  border-radius: 3px;
  height: 35px;
}
span.clear { clear: left; display: block; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Search</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
  <div class="icons">
  <div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
  <div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
  <span class="clear"></span>
</div>
<div class="searchbar">
  <input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>

图片：

【问题讨论】：

可以重新排列html吗？
您是否尝试为.icons 类设置margin-left 和margin-right？

标签： html css button input

【解决方案1】：

选项 1： .将容器的内部元素包裹在另一个包裹中，并在该元素上设置边距。选项 2：在 sn-p 中，对图标应用边距，然后自己输入。我在你的 sn-p 中添加了 3 行代码。

.container {
  float: center;
  text-align: center;
  width: 100%;
  overflow: hidden;
}
#falist, #faupload {
  display: inline-block;
  position: relative;
  font-size: 25px;
}
#falist {
  float: left;
  margin-left: 35px; /* 1) MOVING FIRST IMAGE FROM SIDE */
}
#faupload {
  float: right;
  margin-right: 35px; /* 2) MOVING 2ND IMAGE FROM RIGHT SIDE */
}
input {
  border: 1px solid #F1F;
  width: calc(100% - 70px); /* 3) 100% - HOW MUCH MARGIN DO YOU WANT AROUND INPUT?  */
  border-radius: 3px;
  height: 35px;
  margin: 0 35px; /* 4) APPLY MARGIN TO INPUT */
}
span.clear { clear: left; display: block; }

    <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
<div class="container">
  <div class="icons">
  <div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
  <div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
  <span class="clear"></span>
</div>
<div class="searchbar">
  <input id="searchbox" type="search"/>
</div>
</div>

【讨论】：

【解决方案2】：

这是一种使用 flexbox 的方法，在 CSS 和 HTML 中的代码要少得多

.container,
.icons {
  display: flex;
  flex-wrap: wrap;
  width: 100%
}

.icons {
  justify-content: space-between
}

.searchbar {
  flex: 1
}

#searchbox {
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="icons">
    <div id="falist">
      <i class="fa fa-list" aria-hidden="true"></i>
    </div>
    <div id="faupload">
      <i class="fa fa-upload" aria-hidden="true"></i>
    </div>
  </div>
  <div class="searchbar">
    <input id="searchbox" type="search" />
  </div>

</div>

【讨论】：

好的，我误解了问题，答案已更新，所以downvoter可以看看？

【解决方案3】：

从span.clear 中取出clear:left

下面的片段

.container {
  float: center;
  text-align: center;
  width: 100%;
  overflow: hidden;
  vertical-align:top;
}
#falist, #faupload {
  display: inline-block;
  position: relative;
  font-size: 25px;
}
#falist {
  float: left;
}
#faupload {
  float: right;
}
input {
  border: 1px solid #F1F;
  width: 90%;
  border-radius: 3px;
  height: 35px;
}
span.clear { display: block; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Search</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
  <div class="icons">
  <div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
  <div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
  <span class="clear"></span>
  <div class="searchbar">
  <input id="searchbox" type="search"/>
</div>
</div>

</div>
</body>
</html>

【讨论】：

【解决方案4】：

.icons{
  margin-left: 37px;
  margin-right: 37px;
}

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

【讨论】：

【解决方案5】：

我设法通过将以下代码添加到元素 .icons 来解决此问题，希望对您有所帮助！

.icons{
    margin: 0 31px;
}

.container {
  float: center;
  text-align: center;
  width: 100%;
  overflow: hidden;
}
#falist, #faupload {
  display: inline-block;
  position: relative;
  font-size: 25px;
}
#falist {
  float: left;
}
#faupload {
  float: right;
}
input {
  border: 1px solid #F1F;
  width: 90%;
  border-radius: 3px;
  height: 35px;
}
span.clear { clear: left; display: block; }

.icons{
    margin: 0 31px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Search</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
  <div class="icons">
  <div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
  <div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
  <span class="clear"></span>
</div>
<div class="searchbar">
  <input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>

【讨论】：