讓我的表單輸入字段在彼此之間

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的寄存器形式（對於荷蘭語btw抱歉）互相之外，我想要的是讓它們在彼此之下..寄存器表單被包裝在register_wrapper中。我希望兩個輸入字段都對齊到這個包裝的左邊，所以我用float來做到這一點。雖然浮動也許也導致領域不在彼此之下對齊？這就是我刪除浮球的原因，但他們仍然彼此對齊。

我試着刪除我的小提琴中的所有非寄存器相關的代碼，但由於某種原因，當我這樣做時，字段將彼此對齊（1完全向左和1個字段一些像素到右側 - 這也是信達奇怪的？）。雖然當我試圖刪除我的工作文件中的所有其他東西的CSS，並在網上測試它們時，他們仍然對齊，而他們不是在小提琴中。

無論如何，大量的奇怪的東西發生，而我不知道是什麼造成的問題。所以，讓你們在主要問題上：我如何讓我的2個寄存器輸入字段彼此對齊，而不是像在張貼的小提琴中一樣。

謝謝大家提前對不起我的英語不好，它不是我的母語langquage你可能注意到了:)

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選擇看起來是這樣的：

#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/

希望這有助於！