如何移动此搜索表单？ （CSS）
[英]How can I move this search form? (CSS)
问题描述
现在我有一个这样的页面
我想要得到的是这样的：
我一直在寻找像这样的教程和东西，但我仍然停留在这个地方。 我的代码是：
HTML
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div id="containerHeader">
<h1>Seek & enjoy</h1>
<h3>Your movie seeker</h3>
<div id="containerForm">
<form class="form-wrapper cf">
<input type="text" placeholder="Find your movie"
required>
<button type="submit">Seek</button>
</form>
</div>
</div>
</body>
</html>
CSS
#containerHeader {
background-color: #D1D0CE;
text-align: center;
}
/*Clearing Floats*/
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 0;
margin: 150px auto 50px auto;
border-radius: 10px;
}
我只发布了CSS代码，我认为有必要解决此问题。 大多数CSS代码都不是我的，我在CSS上还很新。 我认为解决方案是使用正确的position但是我还没有正确使用它。 任何想法？ 请，如果我的问题不正确，请告诉我进行编辑。
谢谢
5 个解决方案
解决方案1
1 2014-10-01 09:38:13
这是margin-top: 150px在CSS的简写中有margin-top: 150px ： margin: 150px auto 50px auto; 。 将其更改为较小的数字将减小间隙的大小。
解决方案2
0 2014-10-01 09:53:28
在这种情况下，您应该减少边距。
.form-wrapper {
width: 450px;
padding: 0;
margin: 50px auto 50px auto;
border-radius: 10px;
}
但与此同时，您必须增加容器填充的背景色。
#containerHeader {
background-color: #D1D0CE;
text-align: center;
padding-bottom: 28px;
}
解决方案3
0 2014-10-01 09:59:35
您需要更改边际最高价值。 150px
解决方案4
0 2014-10-01 10:03:46
你以为你错了
.form-wrapper {
width: 450px;
padding: 0;
margin: 30px auto;
border-radius: 10px;
}
解决方案5
0 2014-10-01 10:03:48
这是因为您的保证金。
.form-wrapper {
width: 450px;
padding: 0;
margin: 150px auto 50px auto;
border-radius: 10px;
}
由于要缩短文本和搜索表单之间的距离，因此需要更改margin-top的值，在这种情况下为150px 。 例如，尝试将其更改为40px 。 从左到右的4个值分别代表top ， right ， bottom和left边距。
这是一些jsbin 。
如何将搜索栏移到顶部？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.