将所有文本框对齐在相同的垂直位置答案

【问题标题】：align all the text boxes in same vertical position将所有文本框对齐在相同的垂直位置
【发布时间】：2016-12-20 17:12:18
【问题描述】：

如何使所有文本框对齐在相同的垂直位置？标签完成后，我的文本框就开始了。文本框跟随标签的宽度。 还需要注意的是，所有标签都是左对齐的。 我可以不使用表格，只使用 html 和 css 来做到这一点吗？

代码::

<div style="width: 100%; font-family: Arial,Helvetica, sans-serif;">

                <div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
                    <b>Previous Password:</b>
                    <asp:TextBox ID="txt_prev_pwd" runat="server"  />
                </div>
                <div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
                    <b>New Password:</b>
                    <asp:TextBox ID="txt_new_pwd" runat="server" />
                </div>
                <div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
                    <b>Retype Password:</b>
                    <asp:TextBox ID="txt_re_pwd" runat="server" />
                </div>
            </div>
        </div>

【问题讨论】：

试试表格或弹性盒子
我可以不使用桌子吗？
使用 div 和 css 你可以做到。
是的。查看css-tricks.com/snippets/css/a-guide-to-flexbox
使用 display: table & display:table-row & display: table-cell

标签： javascript html css asp.net

【解决方案1】：

您可以在b标签中添加CSS样式：

b{
  display: inline-block;
  width: 150px;
}

我建议在<label> 上更改<b> 标签，添加类名，然后设置样式。

【讨论】：

【解决方案2】：

您可以使用此代码：

.fields{display:table}
.fields-row{display: table-row;}
.fields-row b{display: table-cell}

<div class="fields">

                <div class="fields-row">
                    <b>Previous Password:</b>
                    <input type=text />
                </div>
                <div class="fields-row">
                    <b>New Password:</b>
                    <input type=text />
                </div>
                <div class="fields-row">
                    <b>Retype Password:</b>
                    <input type=text />
                </div>
            </div>
        </div>

【讨论】：

【解决方案3】：

尝试将每一行包装在一个指定宽度的单独 div 中，并使用 CSS 属性 float、text-align 和 align

<div style="max-width: 50%; align: center">
  <div style="max-width: 50%; text-align: center; float: left">Field #1</div>
  <div style="max-width: 50%; text-align: center; float: right">
    <input type="text">
  </div>
</div>
<br>
<div style="max-width: 50%; align: center">
  <div style="max-width: 50%; text-align: center; float: left">Field #2 Blah</div>
  <div style="max-width: 50%; text-align: center; float: right">
    <input type="text">
  </div>
</div>
<br>
<div style="max-width: 50%; align: center">
  <div style="max-width: 50%; text-align: center; float: left">Here's field #3</div>
  <div style="max-width: 50%; text-align: center; float: right">
    <input type="text">
  </div>
</div>

【讨论】：

【解决方案4】：

虽然 Whitcik 的响应非常准确，但我更喜欢使用相对宽度：

b{
  display: inline-block;
  max-width: 75%;
  min-Width: 20%;
}

这样，您可以在不同的宽度下进行测试，保持长宽比稳定（移动设备）。这只是另一种解决方案。 Whitcik 的回答完全正确；）

【讨论】：