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

【问题标题】：Styling Form with Label above Inputs输入上方带有标签的样式表
【发布时间】：2011-08-28 02:46:09
【问题描述】：

我想生成以下表单样式：

姓名电子邮件 [........] [.......] 主题 [........] 信息 […………………………………………] […………………………………………] […………………………………………] […………………………………………]

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

目前正在生产：

姓名 [...................] 电子邮件 [...................] 主题 [...................] 信息 […………………………………………] […………………………………………] […………………………………………] […………………………………………]

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

【问题讨论】：

查看display: inline-block 我更喜欢它来布置表格而不是浮动。注意元素之间的空间，使用 Django 我使用 {% spaceless %} 一个内置的模板机制。

标签： html css

【解决方案1】：

我会同时创建 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>

【讨论】：

什么？您可以设置<br> 标签的样式？！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你可以试试

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

然后像css一样

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

【讨论】：

【解决方案4】：

我不希望使用仅限 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>

【讨论】：

如果你想使用 SCSS，你可以这样嵌套： ul.form{ width: 500px;填充：0px；边距：0px；列表样式类型：无； li{ 宽度：500px;输入{宽度：200px; } 文本区域{ 宽度：450 像素；高度：150px； } &.twoColumnPart{ 浮动：左；宽度：250px； } } }

【解决方案5】：

我知道这是一个已接受答案的旧答案，并且该答案效果很好。如果您没有设置背景样式并将最终输入浮动到左边。如果是，那么表单背景将不包括浮动输入字段。

为避免这种情况，请将具有较小输入字段的 div 设置为 inline-block 而不是向左浮动。

这个：

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

【讨论】：

【解决方案6】：

不需要像其他人建议的那样添加任何额外的 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/

【讨论】：

这在今天的 Chrome 上不起作用，主题输入框与名称标签+输入以一种奇怪的方式交错。我认为列顺序的 Flexbox 或者只是一个好的旧更多直观。

【解决方案7】：

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

然后我得到了一个丑陋的小分辨率

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

缺点是label和input之间有很大的空白，当然可以调整css

演示在： http://jsfiddle.net/bqkawjs5/

【讨论】：

【解决方案8】：

或者....您可以在输入上使用带有 flex-direction: 列的 flexbox，它们会像极乐一样排列。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案9】：

在标签元素上使用flex-direction: column; 会将标签放置在它们的框上方，但它也会将所有框锁定在一个长列中。要每行获得一个以上的框，在框上方的标签中，您必须将它们与 div 配对。以下是两者的示例：

#survey-form1 label {
  display:flex;
  flex-direction:column;
}

#survey-form2 {
  display: flex;
  flex-direction: row;
}

.inputPair {
  display: flex;
  flex-direction: column;
  margin-right: 10px
}

<form id="survey-form1">
  <label for="name1">Name</label>
  <input type="text" id="name1">

  <label for="email1">Email</label>
  <input type="email" id="email">
</form>

<form id="survey-form2">
  <div class="inputPair">
    <label for="name2">Name2</label>
    <input type="text" id="name2">
  </div>
<div class="inputPair">
  <label for="email2">Email2</label>
  <input type="email" id="email2">
</div>
</form>

【讨论】：