html - 使 2 个元素彼此相邻浮动

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

如何使我的“消息”文本区域浮动在文章的右侧，而其余的则在左侧？

更新

@PSCoder 解决了它！这个小提琴显示了解决方案 - http://jsfiddle.net/8PvkV/

Answer 1

给你的标签：display: inline-block;

label {display: inline-block}

这是一个示例：

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

Answer 2

您想要将 textarea 元素移到其余元素之前，或者将表单浮动到右侧。

由于您输入元素的顺序，“消息”文本框被清除然后浮动。