내 양식 입력 필드 가져 오기

Question

@gnagy @Satwik Nadkarny 답장 모두 도움이되었습니다. 만약 내가 그들을 + (슬프게도 requeres 15 담당자) 수 있지만 다른 문제가 나를 이끌었다.

첫 번째 2 개의 텍스트 입력란 뒤에 이메일 및 비밀번호 유형의 다른 입력란을 추가했습니다. 그들은 텍스트 입력 필드와 똑같은 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 btw는 유감 스럽습니다)이있는 등록 양식이 서로 외에 있습니다.하지만 내가 원하는 것은 이들을 서로 아래에 두는 것입니다 .. 레지스터 양식은 register_wrapper에 랩핑됩니다. 두 입력 필드를이 래퍼의 왼쪽에 맞춰서 float을 사용하여이 작업을 수행하도록합니다. float가 필드 아래에 정렬되지 않을 수도 있습니다. 그게 내가 플로트를 제거한 이유지만, 그들은 여전히 ​​서로를 정렬하고 있습니다.

필자 피들에서 모든 비 등록 관련 코드를 제거하려고 시도했지만,이 작업을 수행했을 때 필드가 서로 아래에 정렬됩니다 (1은 완전히 왼쪽으로, 1 필드는 오른쪽으로 일부 px - 그것은 또한 이상한 신다?). 비록 내가 작업 문서의 모든 다른 것들의 CSS를 제거하려고 시도하고 웹에서 테스트 할 때, 그들은 피들에 있으면서도 서로가 아니라 여전히 정렬되어 있습니다.

어쨌든, 이상한 물건들 내가 그 문제를 일으키는 원인을 알지 못하는 동안 일어나는 일. 그래서 주요 질문에 너희들을 지키기 위해서 : 어떻게 내 2 개의 레지스터 입력란을 게시 된 바이올린과 같이 서로가 아닌 서로 아래에 정렬시킬 수 있을까 ..

은 사전에 모두 감사하고

Answer 1

input { 
    display: block; 
} 

당신을 위해 트릭을해야한다 : 당신의 바이올린에

을 테스트 :) 알 수있는 나의 나쁜 영어 죄송합니다, 내 기본 langquage 밤은 , 거기 잘 작동

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/

희망이 있습니다!