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

我想产生以下表单样式：

姓名电子邮件
[.................] [.................]

学科
[.................]

信息
[......................................................]
[......................................................]
[......................................................]
[......................................................]

我拥有的HTML代码是：

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

目前正在产生：

名称 [...................]
电邮[...................]
学科 [...................]
信息
[......................................................]
[......................................................]
[......................................................]
[......................................................]

最好的方法是什么？我一直迷住我的花车！

我将同时创建input和label元素display: block，然后将名称标签和输入以及电子邮件标签和输入分别拆分div's并浮动。

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>

您可以尝试类似

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

然后像

form { width: 400px; }
form section div { float: left; }
form section div.full { clear: both; }
form section div label { display: block; }

我不希望使用仅HTML5元素，例如 <section>。如果尝试使用代码生成表单，则对输入字段进行分组也可能会很麻烦。最好为每个标记产生相似的标记，并且只更改类名称。因此，我建议一个如下所示的解决方案：

的CSS

label, input {
    display: block;
}
ul.form {
    width  : 500px;
    padding: 0px;
    margin : 0px;
    list-style-type: none;
}
ul.form li  {
    width : 500px;
}
ul.form li input {
    width : 200px;
}
ul.form li textarea {
    width : 450px;
    height: 150px;
}
ul.form li.twoColumnPart {
    float : left;
    width : 250px;
}

的HTML

<form name="message" method="post">
    <ul class="form">
        <li class="twoColumnPart">
            <label for="name">Name</label>
            <input id="name" type="text" value="" name="name">
        </li>
        <li class="twoColumnPart">
            <label for="email">Email</label>
            <input id="email" type="text" value="" name="email">
        </li>
        <li>
            <label for="subject">Subject</label>
            <input id="subject" type="text" value="" name="subject">
        </li>
        <li>
            <label for="message">Message</label>
            <textarea id="message" type="text" name="message"></textarea>
        </li>
    </ul>
</form>

我知道这是一个可以接受的旧答案，并且该答案非常有用。.如果您不设置背景样式并保留最终输入剩余的内容。如果是这样，则表单背景将不包括浮动的输入字段。

为了避免这种情况，使具有较小输入字段的div内联块而不是向左浮动。

这个：

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

而不是：

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

不需要像其他人建议的那样添加任何额外的div包装器。

最简单的方法是将输入元素包装在相关的标签标记中，并将输入样式设置为display:block。

获得的奖励积分：现在，您无需设置标签for属性。因为每个标签都针对嵌套输入。

<form name="message" method="post">
    <section>
        <label class="left">
            Name
            <input id="name" type="text" name="name">
        </label>
        <label class="right">
            Email
            <input id="email" type="text" name="email">
        </label>
    </section>
</form>

https://jsfiddle.net/Tomanek1/sguh5k17/15/

10分钟前，我在输入上方遇到了位置标签的相同问题

然后我有一个小的丑陋的决议

<form>
    <h4><label for="male">Male</label></h4>
    <input type="radio" name="sex" id="male" value="male">
</form>

缺点是标签和输入之间有很大的空白，您当然可以调整CSS

演示位于：http : //jsfiddle.net/bqkawjs5/