html - 输入上方带有标签的样式表

Question

我想生成以下表单样式:

Name                    Email
[.................]     [.................]

Subject
[.................]

Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]

The HTML code I have is:

<form name="message" method="post">
    <section>
    <label for="name">Name</label>
    <input id="name" type="text" value="" name="name">
    <label for="email">Email</label>
    <input id="email" type="text" value="" name="email">
    </section>
    <section>
    <label for="subject">Subject</label>
    <input id="subject" type="text" value="" name="subject">
    <label for="message">Message</label>
    <input id="message" type="text" value="" name="message">
    </section>
</form>

目前正在制作中:

Name    [...................]
Email   [...................]
Subject [...................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]

执行此操作的最佳方法是什么？我的花车总是乱七八糟!

Answer 1

我会制作 input 和 label 元素 display: block ，然后拆分名称标签和输入，以及电子邮件标记并输入到 div 的 中并将它们彼此相邻 float 。

input, label {
    display:block;
}

<form name="message" method="post">
    <section>

  <div style="float:left;margin-right:20px;">
    <label for="name">Name</label>
    <input id="name" type="text" value="" name="name">
  </div>

  <div style="float:left;">
    <label for="email">Email</label>
    <input id="email" type="text" value="" name="email">
  </div>

  <br style="clear:both;" />

    </section>

    <section>

    <label for="subject">Subject</label>
    <input id="subject" type="text" value="" name="subject">
    <label for="message">Message</label>
    <input id="message" type="text" value="" name="message">

    </section>
</form>