html - 将我的表单输入字段置于彼此之下

Question

@gnagy @Satwik Nadkarny 你的两个答案都对我有帮助，如果可以的话我会 + 他们(遗憾地要求 15 个代表)但这让我遇到了另一个问题。

在前两个文本输入字段之后，我添加了另一个电子邮件和密码类型的输入字段。它们使用与文本输入字段完全相同的 css，但出于某种原因，它们被 css 布局覆盖，因为边距效果不起作用(电子邮件和密码表单非常接近)。

你们可能知道是什么原因造成的吗？

看图更好理解；

http://s27.postimg.org/qevbboa6r/voorbeeld.png

提前致谢!

--原帖-- 在我的代码中，我已经创建了一个表单，到目前为止，它有 2 个输入字段。然而，这些字段彼此相邻对齐，而我希望它们位于彼此下方，但我无法让它工作。

这是我的表单代码:

<div id="wrapper">

<div id="register_wrapper">
   <h1>Registreren</h1>
   <form class="registratie_form" id ="register-form" action="register.php" method="post" novalidate="novalidate" >


             <input type="text" id="voornaam" name="voornaam" required placeholder="Jouw voornaam" maxlenght='50' pattern="[A-Za-z]{2,}">
                   
              <input type="text" id="achternaam" name="achternaam" required placeholder="Jouw achternaam" maxlenght='50' pattern="[A-Za-z]{4,}">                              
       </form>      
</div>

CSS代码:

    #wrapper {
      margin-right: auto;
      margin-left: auto;
      width: 1600px;
      height: 799px;  
    }

#register_wrapper {
      margin-right: 0;
      margin-left: 0;
      width: 700px;
      height: 600px;

      clear: both;
      position: relative;
      float: right;
    }

.registratie_form input:focus:invalid, .registratie_form textarea:focus:invalid {
    background: #fff no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
 }

 .registratie_form input:required:valid, .registratie_form textarea:required:valid {
    background: #fff no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}   

#voornaam{
        font-size: 1em;
        outline: none;
        padding: 0.5em;
        border-radius:10px;

        width: 280px;
        position: relative;
    }


    #voornaam::-webkit-input-placeholder { font-style: italic; }
    #voornaam::-moz-placeholder { font-style: italic; }
    #voornaam::-ms-input-placeholder { font-style: italic; }

#achternaam{
        font-size: 1em;
        outline: none;
        padding: 0.5em;
        border-radius:10px;

        width: 280px;
        position: relative;
    }


    #achternaam::-webkit-input-placeholder { font-style: italic; }
    #achternaam::-moz-placeholder { font-style: italic; }
    #achternaam::-ms-input-placeholder { font-style: italic; }  

http://jsfiddle.net/LZ2xt/

我想了很久我怎么问它或解释它我还添加了一个包含所有代码的 fiddle ，以防非注册代码与问题相关:

正如您在 fiddle 中看到的那样，带有输入字段 voornaam 和 achternaam(对不起，顺便说一下荷兰语)的注册表单彼此相邻，但我想要的是将它们放在彼此的下方.. 注册表单包装在 register_wrapper 中。我希望两个输入字段都对齐到此包装器的左侧，所以我使用 float 来执行此操作。虽然 float 也可能导致字段不在彼此下方对齐？这就是我移除 float 的原因，但它们仍然彼此对齐。

我尝试删除我的 fiddle 中所有非注册相关的代码，但出于某种原因，当我这样做时，这些字段将彼此对齐(1 个完全向左，1 个字段向右一些 px - 这cinda也奇怪？)。虽然当我尝试删除我的工作文档中所有其他内容的 css 并在网络上对其进行测试时，它们仍然彼此对齐，而在 fiddle 中它们不是..

无论如何，当我不知道是什么导致问题时，发生了很多奇怪的事情。因此，为了让你们解决主要问题:我如何让我的 2 个寄存器输入字段彼此对齐，而不是像发布的 fiddle 那样彼此对齐。

提前谢谢大家，抱歉我的英语不好，这不是您可能注意到的我的母语:)

Answer 1

input {
    display: block;
}

应该能帮到你 :)

在你的 fiddle 上测试过，在那里工作正常