个人中心
gpt4 book ai didi

html - 将图标与简单的搜索栏对齐

转载 作者：太空宇宙 更新时间：2023-11-04 01:50:36 28 4
gpt4 key购买 nike

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

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

代码:

.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>

图片:

enter image description here

最佳答案

选项 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>

关于html - 将图标与简单的搜索栏对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43576421/

28 4 0
文章推荐： html - noscript 样式无效
文章推荐： javascript - 难以循环 Mongoose 数据
文章推荐： javascript - 如何跨 NodeJs 应用程序和模块正确重用与 Mongodb 的连接
文章推荐： node.js - 我可以在 Ionic 项目中安装 NPM 包吗？