如何在 HTML 中对齐表单输入答案

【问题标题】：How to align form input in HTML如何在 HTML 中对齐表单输入
【发布时间】：2020-08-24 23:07:23
【问题描述】：

我正在努力调整此表单上的输入。我尝试了很多东西，但没有一个奏效。

如果有人能帮我解决这个问题，那就太好了。附上代码和表格

enter image description here enter image description here

[

<form action="" method="post" enctype="text/plain">
  <label>First Name</label>
  <input type="text" name="Your Name" value=""><br/>
  <labe>Last Name</label>
    <input type="text" name="Last Name" value=""><br/>
  <label>Contact Number</label>
  <input type="value" name="Contact Number" value=""><br/>
  <label>Email address</label>
  <input type="email" name="Email" value=""><br/>
  <label>Date of the application</label>
  <input type="date" name="Date"><br>
  <label> Add your message</label><br>
  <textarea name="Message" rows="10" cols="30"></textarea><br>
  <label>Have you read the terms and condition of the website?</label>
  <input type="checkbox" name="box"><br>
  <label>Submit application</label>
  <input type="submit" name="">
</form>

【问题讨论】：

@Always_askibg23 我已经看过你的表格，但是代码的 sn-ps 会很有帮助，请粘贴你目前必须启用的部分 html 和 CSS，以便有人帮助你。 #干杯
我很抱歉。这是我第一次使用它。代码的sn-ps是第一个“在此处输入图片描述”。不知何故，两个sn-ps彼此相邻，我不知道如何分开sn-ps。我将再次添加它我还没有添加 CSS，只是 HTML。我将添加代码的sn-p。

标签： html

【解决方案1】：

How to align input forms in HTML 这个问题之前已经回答过了。如果您能详细说明您尝试过的方法和失败的方法，那么它可能会有所帮助。

【讨论】：

我很抱歉。还在学习如何使用这个东西。我的表单不对齐，我不知道如何使用纯 HTML 对齐它。现在我已经设法插入我的代码。希望有帮助

【解决方案2】：

您的问题没有理解清楚，但您似乎想为两个项目之间具有相等空间的所有位置对齐标签和输入对吗？

我修改了你的代码并创建了新代码，看看这个你会有所了解。这将在标签和输入之间提供相等的空间。

HTML 代码：

<div class="form-label">
    <label>Name</label>
    <input type="text" name="">
</div>

CSS 代码：

label {
    color: #000;
    width: 50%;
    float: left;
}

.form-label {
    width: 100%;
    display: inline-block;
}

input {
    width: 50%;
}

【讨论】：

对我的表述不够清晰深表歉意。这就是想法。谢谢
我已经完成了代码，但输入仍然不对齐，仍然有同样的问题。