我正在编辑一个简单的搜索栏。我的计划是在搜索栏上方有两个响应式按钮。一个按钮向右浮动，一个按钮向左浮动。
但是，我似乎无法让按钮停止出现，它们与搜索栏不一致，几乎“超出其容器”。
代码:
.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>图片:
最佳答案
选项 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/