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

如何让我的“消息”textarea漂浮在文章的右侧而其余部分位于左侧？

更新

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

Answer 1

提供您的标签：显示：内联块;

label {display: inline-block}

以下是一个示例：

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

Answer 2

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

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

使2个元素彼此相邻浮动

2 个答案: