Html 使用输入上方的标签设置窗体样式

我想制作以下表格样式：

Name Email [.................] [.................] Subject [.................] Message [.........................................] [.........................................] [.........................................] [.........................................] 姓名电子邮件 [.................] [.................] 主题 [.................] 消息 [.........................................] [.........................................] [.........................................] [.........................................] 我的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>

名称
电子邮件
主题
消息

目前它正在生产：

Name [...................] Email [...................] Subject [...................] Message [.........................................] [.........................................] [.........................................] [.........................................] 姓名[……] 电子邮件[……] 主题[……] 消息 [.........................................] [.........................................] [.........................................] [.........................................]

---

最好的方法是什么？我的花车总是弄得一团糟

我将使

输入

和

标签

元素

显示：block

，然后将名称标签和输入以及电子邮件标签和输入拆分为

div的

，并将它们相邻浮动

输入，标签{
显示：块；
}

名称
电子邮件


主题
消息

您可以尝试以下方法

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

---

我不希望只使用HTML5元素，比如

。如果您试图用代码生成表单，对输入字段进行分组可能会很痛苦。最好为每个类生成相似的标记，并且只更改类名。因此，我建议采用如下解决方案：

CSS

HTML

名称


电子邮件


主题


消息

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

然后我得到了一个丑陋的小决定

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

男性

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

演示地点：

---

我知道这是一个老问题，有一个公认的答案，这个答案非常有效。。如果没有设置背景样式并将最终输入浮动到左侧。如果是，则表单背景将不包括浮动输入字段

为了避免这种情况，使具有较小输入字段的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

获得的奖励积分：现在您不需要为属性设置标签。因为每个标签都以嵌套输入为目标

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

名称
电子邮件

---

可能有点晚了，但这对我来说很有效。 我只是在标签和输入元素上使用了列flex direction HTML

名称
电子邮件
CSS
标签，输入{
显示器：flex；
弯曲方向：立柱；
}

签出

display:inline block

我更喜欢它，而不是用于布局表单的浮动。注意元素之间的空格，使用Django我使用了

{%spaceless%}

一个内置的模板机制。这很简单-创建一个小提琴：天哪….-顺便说一句，它工作得很好，而且反应灵敏。什么？你可以设计一个

标签？！如果你想使用SCS，你可以这样嵌套它：ul.form{width:500px；padding:0px；margin:0px；list-style-type:none；li{width:500px；input{width:200px；}textarea{width:450px；height:150px；}&.twoColumnPart{float:left；width:250px；}}}这在Chrome上不起作用，主题输入框以一种奇怪的方式与名称标签+输入交叉。。我认为Flexbox与列顺序或只是一个好的旧的更直观。

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

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

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

<form id="survey-form">
    <label for="name">Name</label>
    <input type="text" id="name">
    
    <label>Email</label>
    <input type="email" id="email">
  </form>

CSS

label,input{
  display:flex;
  flex-direction:column;
}