Javascript 在html和css中不使用表格的文本对齐

我正在尝试学习HTML和CSS，并使用老式方法创建一个带有三个输入控件（两个文本和一个按钮）的登录页面。但是，我使用

来解决文本框的对齐问题。但我在某个地方读到，使用表格被认为不是一个好方法。这就是我正在做的：

Home.html

---

我关心的是使用css，我能够对齐输入控件，但我必须使用多个中断标记（

）和额外的代码来对齐，这通过简单地使用

标记更容易。有人能给我推荐标准方法吗？我走的路对不对？

表格不是一个好方法，原因有很多，但表格是您尝试创建的类型的理想选择

由于许多原因，表不是一种好的方法，但对于您试图创建的类型的表单，表是理想的选择

虽然表格是一种很好的表单处理方法，但我更喜欢更短更简单的方法，即

CSS表格

下面是一个代码：

表单{
显示：表格；
}
p{
显示：表格行；
}
标签{
显示：表格单元格；
}
输入{
显示：表格单元格；
}

短标签：


超长标签：

虽然表格是一种非常好的表单处理方法，但我更喜欢更短更简单的方法，即

CSS表格

下面是一个代码：

表单{
显示：表格；
}
p{
显示：表格行；
}
标签{
显示：表格单元格；
}
输入{
显示：表格单元格；
}

短标签：


超长标签：

 > p>作为对已经说过的内容的一个小小的补充，我建议您考虑使用单独容器用于单个窗体控件及其标签的选项。像这样：

<form>
    <div class="input-group">
        <label for="name">Username:</label>
        <input type="text" id="name" value="" />
    </div>
    <div class="input-group">
        <label for="password">Password:</label>
      <input type="text" id="password" value="" />
    </div>
</form>


用户名：
密码：

也许有人会说这是多余的，但从我的角度来看，它在定位过程中给了你更多的控制。另一方面，他提出了一个很好的观点。我仍然在许多地方发现表单使用的表格，尽管我更喜欢避开这种方法

如果您想水平地扩展标签和输入，您可能希望使用FraceBox。
 
作为已经提到的内容的一个小补充，我建议您考虑使用单独容器用于单个窗体控件及其标签的选项。像这样：
<form>
    <div class="input-group">
        <label for="name">Username:</label>
        <input type="text" id="name" value="" />
    </div>
    <div class="input-group">
        <label for="password">Password:</label>
      <input type="text" id="password" value="" />
    </div>
</form>


用户名：
密码：

也许有人会说这是多余的，但从我的角度来看，它在定位过程中给了你更多的控制。另一方面，他提出了一个很好的观点。我仍然在许多地方发现表单使用的表格，尽管我更喜欢避开这种方法

另外，如果您想水平分布标签和输入，您可能需要使用FlexBox。
@iSahilSharma请在不使用表格的情况下查找以下代码。我希望你也有同样的期待。其中的一部分只是建议开始使用引导框架，而不是使用自定义编码


.main\u容器{
宽度：100%；
}
.内箱{
利润率：40px自动；
宽度：30%；
}
.内箱跨度{
明确：两者皆有；
显示：块；
}
.内箱跨度：第一个孩子{
边缘底部：10px；
}
.内盒跨度：第n个子（n+2）{
边缘底部：20px；
}

登录页面
用户名：
密码：
@iSahilSharma请在不使用表的情况下查找以下代码。我希望你也有同样的期待。其中的一部分只是建议开始使用引导框架，而不是使用自定义编码


.main\u容器{
宽度：100%；
}
.内箱{
利润率：40px自动；
宽度：30%；
}
.内箱跨度{
明确：两者皆有；
显示：块；
}
.内箱跨度：第一个孩子{
边缘底部：10px；
}
.内盒跨度：第n个子（n+2）{
边缘底部：20px；
}

登录页面
用户名：
密码：
使用表格并不总是好的。一种方法是

   <div class="form-wrap">
     <h2>Login Form</h2>
     <div class="form-field">
       <label>User Name</label>
       <input type="text" value="" />
     </div>
     <div class="form-field">
       <label>Password</label>
       <input type="text" value="" />
     </div>
     <input type="button" value="Submit" />
    </div>

使用表格链接到
并不总是好的。一种方法是

   <div class="form-wrap">
     <h2>Login Form</h2>
     <div class="form-field">
       <label>User Name</label>
       <input type="text" value="" />
     </div>
     <div class="form-field">
       <label>Password</label>
       <input type="text" value="" />
     </div>
     <input type="button" value="Submit" />
    </div>

如果需要空格，请链接到
，并在同一行上使用边距或填充。如果您想在单独的行中显示，请使用display blockRead获取有关边距和/或填充的更多信息。首先+1用于结构良好的问题和清晰的缩进。它使您的代码示例非常可读。表不是一种很好的布局html页面的方法，但是它们可以作为表单的一个选项。其他替代方法是使用无序列表
ul
和列表项
li
保存表单元素，或者使用
div
和段落
p
保存表单元素。您的
home.html
的第二个示例是使用
div
和
span
元素，而不是
p
元素，这实际上是我提到的最新选项的一个变体。@cezar-感谢您的建议，我现在使用“display:table”属性进行对齐，该属性工作正常。如果需要空间，请在同一行上使用边距或填充。如果您想在单独的行中显示，请使用display blockRead获取有关边距和/或填充的更多信息。首先+1用于结构良好的问题和清晰的缩进。它使您的代码示例非常可读。表不是一种很好的布局html页面的方法，但是它们可以作为表单的一个选项。其他选择
   <div class="form-wrap">
     <h2>Login Form</h2>
     <div class="form-field">
       <label>User Name</label>
       <input type="text" value="" />
     </div>
     <div class="form-field">
       <label>Password</label>
       <input type="text" value="" />
     </div>
     <input type="button" value="Submit" />
    </div>

.form-field label {
  width: 80px;
  display: inline-block;
}
.form-field {
  margin-bottom: 10px;
}