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/

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

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

我尝试删除我的小提琴中的所有非注册相关代码但由于某些原因，当我这样做时，字段将在彼此下方对齐（1完全向左，1个字段向右对齐 - 其中信达也很奇怪？）。虽然当我尝试在我的工作文档中删除所有其他内容的CSS并在网上测试它们时，它们仍然是彼此排列的，而在小提琴中它们并非...

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

先谢谢大家，对不起我的英语不好，这不是我的本地语言，你可能会注意到:)

Answer 1

input {
    display: block;
}

应该为你做的伎俩：）

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

Answer 2

您有一个名为voornaam的ID选择器。

#voornaam {
   font-size: 1em;
   outline: none;
   padding: 0.5em;
   border-radius:10px;
   width: 280px;
   position: relative;
}

您需要添加以下内容：

display:block;

到此。

所以你的id Selector看起来像这样：

#voornaam {
   font-size: 1em;
   outline: none;
   padding: 0.5em;
   border-radius:10px;
   display:block;    /* Add this property*/
   width: 280px;
   position: relative;
   margin:10px 0;    /* This makes it look better though not needed as per your question*/
}

请在此处查看：http://jsfiddle.net/MxHHn/

希望这有帮助!!!

更新：更新了更新后的问题的答案

在这种情况下，你可以取消id选择器。相反，您可以使用类选择器。这将节省大量的代码。只需查看可以保存的代码量：

#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; }  

input[type="text"]:hover {
     border: 1px solid #006FC4;
}

input[type="email"]:hover {
     border: 1px solid #006FC4;
}

input[type="password"]:hover {
     border: 1px solid #006FC4;
}       

input[type="text"] {
      background-color: #FFFFFF;
      border: 1px solid #E2E2E2;
      font-size: 12px;
      padding: 5px;
      outline: none;
}

所有这些代码都可以被替换为：

.allInputs {
    font-size: 1em;
    outline: none;
    padding: 5px;
    border-radius:10px;
    display:block;
    width: 280px;
    position: relative;
    margin:10px 0;
    border: 1px solid #E2E2E2;
    outline: medium none;
}

.allInputs::-webkit-input-placeholder {
    font-style: italic;
}

.allInputs::-moz-placeholder {
    font-style: italic;
}

.allInputs::-ms-input-placeholder {
    font-style: italic;
}

只需添加以下类属性即可使所有文本，密码和电子邮件输入正常工作：

class="allInputs"

所以你的HTML将是：

<input type="text" id="voornaam" class="allInputs"  placeholder="Jouw voornaam" maxlenght='50' pattern="[A-Za-z]{2,}" />

<input type="text" id="achternaam" class="allInputs" placeholder="Jouw achternaam" maxlenght='50' pattern="[A-Za-z]{4,}" />

<input type="password" id="password"  class="allInputs" placeholder="Password"/>

<input type="email" id="email"  class="allInputs" placeholder="Email"/>

请在此处查看：http://jsfiddle.net/MxHHn/2/

希望这有帮助!!!

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

2 个答案: