두 요소를 서로 띄워서 만듭니다.

Question

간단한 문의 양식을 작성하고 있지만 내 콘텐츠를 서로 띄우는 데 문제가 있습니다.

<article> 
<form action="contact.html"> 

      <label for="naam">Naam*:</label> 
      <input type="text" 
       id="naam" 
       required="required"/> 

      <br/> 

      <label for="voornaam">Voornaam*: </label> 
      <input type="text" 
       id="voornaam" 
       required="required"/> 

      <br/> 

      <label for="straat">Straat: </label> 
      <input type="text" 
       id="straat" /> 

      <br/> 

      /*Some code is left out */ 


      <label for="message">message*: </label> 
      <textarea rows="4" 
        cols="16" 
        required="required"> 
      </textarea> 

      <br/> 

      <input type="submit" 
       value="Verzenden" 
       id="btnVerzenden" /> 

      </form> 
</article> 

그리고 이것은 나머지는 왼쪽에있는 동안

label 
{ 
    width:100px; 
    float:left; 
} 

가 어떻게 기사의 오른쪽에 내 "메시지"텍스트 영역 플로트를 할 수 있습니다 내 현재 CSS입니까?

UPDATE는

그것을 해결 @PSCoder! 이 바이올린은 해결책을 보여줍니다 - http://jsfiddle.net/8PvkV/

Answer 1

나머지 부분 앞에 textarea 요소를 이동하거나 양식을 오른쪽으로 옮길 원합니다.

요소를 입력 한 순서 때문에 "메시지"텍스트 상자가 지워지고 그 다음에 이동됩니다.

Answer 2

레이블 지정 : 디스플레이 : 인라인 블록;

label {display: inline-block} 

여기 예제입니다 :

http://jsfiddle.net/Riskbreaker/35Hyh/1/