将图标对齐到简单的搜索栏

时间：2017-04-23 20:57:49

标签： html css button input

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

然而，我似乎无法让按钮停止出现它们不与搜索栏内联，几乎＆＃34;出于其容器＆＃34;。

代码：

＆＃13;
＆＃13; 
.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; }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

图片：

enter image description here

5 个答案:

答案 0 :(得分：1)

这是一种使用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>

答案 1 :(得分：1)

选项1： 。将容器的内部元素包装在另一个包装中，并在该元素上设置边距。 选项2： 在片段中，将边距应用于图标，然后输入自身。我在你的代码片段中添加了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 :(得分：0)

从clear:left

中取出span.clear

下面的代码段

＆＃13;
＆＃13; 
.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; }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

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

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

答案 4 :(得分：0)

我设法通过将以下代码添加到元素.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>

相关问题
最新问题