使html表单中的所有文本框在同一点结束

我正在努力使表单看起来如下面的截图所示。文本框应在文本后立即开始，所有文本框应在同一点结束

我现有的标记如下：

.txtbig{
宽度：100%；
}

预期收件人信息
姓名和职务
公司名称和部门
完整的邮寄地址
直接电话号码。
电子邮件地址
预期用途

考虑使用引导进行此布局

请参阅此链接：

---

我们可以使用以下css：

table tr td:first-child{
  width:20%; //editable as per your design requirement
}

---

这将为表格的所有第一个td设置一个固定宽度，而其他td的宽度将相同，这意味着您的文本区域将具有相同的宽度

您可以使用

Display:flex

重写HTML或重置表格元素的显示值（请参阅第二个代码片段了解此内容）：

div{
边框：实心；
}
p{
显示器：flex；
填充：0.25em0；
保证金：0；
}
输入{
弹性：1；
边缘：0.5 em；
}
/*乐趣*/
第n个孩子（偶数）{
背景：浅灰色；
}

预期收件人信息

姓名和职务


公司名称和部门


完整的邮寄地址


直接电话号码。


电子邮件地址


预期用途

我也同意，使用引导可能是一种可行的方法。这里有一个通用的例子

电子邮件
密码

不可能像在表格中那样完成。表格列将自动调整为与最宽标签的最小宽度相同的宽度。尝试将它们放在一个表元素中，并使用标记而不仅仅是文本。您不应该将表用于布局目的，只用于表格数据！表、tr、tr显示可重置，并可用于首次进近/测试。标签和字段集在这里会做得很好。我同意你的解决方案，但我必须重新设计整个html页面，使用引导设计布局。对我来说，这也占用了很多时间。因此，寻找一个包括我现有方法的解决方案，即使用表。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
</form>