我想制作以下表格样式:

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
[.........................................]
[.........................................]
[.........................................]
[.........................................]

做这件事最好的方法是什么?我的花车总是乱七八糟的!

推荐答案

我会创建inputlabel元素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>

Css相关问答推荐

如何在容器查询体中重新定义:Root的CSS自定义属性值?

响应的Megamenu位置css

如何将此 Select 器转换为TailWind类

指定from_max和to_min值时隐藏Shiny sliderTextInput下的行

显示 P 元素中加载数据的空行

如何在一个父类里面 Select 两个不同的类?

如何为 React Native switch 组件创建标签?

在 dbc.Container 上方包含横幅 - Dash

before 元素的过渡效果

如何使用props 为 Vue 中的组件创建动态背景图像?

最多 2 行的 Flex 水平滚动

在活动状态下更改按钮的外观

CSS3 的 :root 伪类和 html 有什么区别?

您如何设置 Google Places Autocomplete API 的下拉菜单样式?

CSS和 Select 器 - 我可以 Select 具有多个类的元素吗?

中心表单提交按钮 HTML / CSS

使用 float:left 后如何获得新行?

使用 CSS 垂直居中旋转文本

如何根据容器大小设置字体大小?

CSS - 使 div 水平对齐