将我的表单输入字段放在彼此之下

Question

@gnagy @Satwik Nadkarny你的答案都对我有帮助,如果我能帮他们(他们可悲地重复15次),但这导致了另一个问题.

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

你们也许知道造成这种情况的原因是什么？

查看图片以便更好地理解;

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

提前致谢!

--original post-- 在我的代码中,我创建了一个表单,到目前为止,有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/

我花了很长时间才知道如何问它或解释它我还添加了所有代码的小提琴,以防万一非注册码与问题有关:

正如你在小提琴中看到的那样,带有输入字段voornaam和achternaam的寄存器表格(对于荷兰语langquage顺便说一句,对不起),我想要的是将它们放在彼此之下..寄存器表格包含在register_wrapper.我希望两个输入字段对齐到此包装器的左侧,所以我使用float来执行此操作.虽然漂浮也许会导致田地彼此不对齐？这就是我移除浮子的原因,但它们仍然是彼此对齐的.

我试图删除我的小提琴中的所有非注册相关代码,但由于某些原因,当我这样做时,字段将在彼此下方对齐(1完全向左,1个字段向右px - 这也是cinda奇怪？).虽然当我尝试在我的工作文档中删除所有其他东西的css并在网上测试它们时仍然彼此对齐,而在小提琴中它们不是..

无论如何,当我不知道是什么导致问题时,发生了大量奇怪的事情.所以让你们关注一个主要问题:我如何让我的2个寄存器输入字段彼此对齐而不是像在发布的小提琴中那样彼此对齐.

提前谢谢大家,对不起我的英语不好,这不是我的本土语言,你可能会注意到:)

Answer 1

input {
    display: block;
}

应该为你做的伎俩:)

在你的小提琴上测试,在那里工作正常