使兩個元素相互浮動

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> 

這是我目前的CSS

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

我怎樣才能讓我的「消息」文本區域漂浮在文章的右側，而其餘的是左側？

UPDATE

@PSCoder解決它！ 這個小提琴顯示的解決方案 - http://jsfiddle.net/8PvkV/

Answer 1

你要麼在其餘的之前移動textarea元素或浮動窗體的權利。

由於您輸入了元素的順序，「消息」文本框被清除並浮動。

Answer 2

給你的標籤：display：inline-block;

label {display: inline-block} 

這裏有一個例子：

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