Question

如何将所有文本框对齐在同一垂直位置？标签完成后，我的文本框就开始了。文本框遵循标签的宽度。 还需要注意的是，所有标签都是左对齐的。 我可以不使用表格，只使用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>

Answer 1

您可以添加NSUserDefaults标记CSS样式：

我建议更改b{ display: inline-block; width: 150px; }上的<b>代码，添加一个类名，然后设置样式。

Answer 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>

Answer 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>

Answer 4

虽然Whitcik的反应相当准确，但我会优先使用相对宽度：

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

这样，您可以测试不同的宽度，保持纵横比稳定（移动设备）。这只是另一种解决方案。 Whitcik对他的回答完全正确;）

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

4 个答案: