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

Question

我想生成以下表单样式：

姓名 电邮
[................] [................]

主题
[......................]

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

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

目前它正在生产：

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

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

原文由 xylar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

I’d make both the input and label elements display: block , and then split the name label & input, and the email label & input into 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>

原文由 fin1te 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Mardiya 发布，翻译遵循 CC BY-SA 4.0 许可协议