如何移动此搜索表单？ （CSS）

时间：2014-10-01 09:35:12

标签： html css

现在我有一个这样的页面

enter image description here

我希望得到它是这样的：

enter image description here

我一直在寻找教程和类似的东西，但我仍然坚持这一点。我的代码是：

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 个答案:

答案 0 :(得分：1)

它是您在CSS的速记范围内的margin-top: 150px：margin: 150px auto 50px auto;。将其更改为较小的数字将减小间隙的大小。

答案 1 :(得分：0)

在此，你应该减少保证金。

.form-wrapper {
    width: 450px;
    padding: 0;
    margin: 50px auto 50px auto;
    border-radius: 10px;
}

但是有了这个，你必须为你的背景颜色增加容器填充。 

#containerHeader {
    background-color: #D1D0CE;
    text-align: center;
    padding-bottom: 28px;
}

答案 2 :(得分：0)

您需要更改保证金最高价值。 在你的情况下它的150px

答案 3 :(得分：0)

你的保证金错了

.form-wrapper {
    width: 450px;
    padding: 0;
    margin: 30px auto;
    border-radius: 10px;
}

答案 4 :(得分：0)

这是因为你的保证金。

.form-wrapper {
    width: 450px;
    padding: 0;
    margin: 150px auto 50px auto;
    border-radius: 10px;
}

由于您希望缩短文本与搜索表单之间的距离，因此需要更改margin-top的值，在本例中为150px。例如，尝试将其更改为40px。从左到右的4个值表示边距top，right，bottom和left。

这里有一些jsbin。

相关问题
最新问题