html - 对齐 ASP.NET Texbox 控件

Question

我是 ASP.NET 编程的初学者。
我在文本框之前有 3 个文本框控件和 3 个标签词:

姓名/公司:[TextBox1]
电子邮件:[TextBox2]
消息:[TextBox3]

我想将文本框彼此对齐。我还希望标签/文字在文本框的左侧对齐。如下图所示:

Name/Company:[TextBox1]
       Email:[TextBox2]
     Message:[TextBox3          ]
             [                  ]
             [                  ]
             [                  ]
             [                  ]

Currently my messsage label is at the last line of the textbox3 control and my other controls aren't positioned right. What my output is now:

Name/Company:[TextBox1]
Email:[TextBox2]
        [TextBox3          ]
        [                  ]
        [                  ]
        [                  ]
Message:[                  ]

code:

<p>
    Name/Company:
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
    Email:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</p>
<p>
    Message:
    <asp:TextBox ID="TextBox3" runat="server" Height="100px" Width="300px"></asp:TextBox>
</p>

我从事 Java 编程工作已有几年。我曾经在上面创建部分 JPanels 并在它们上面添加按钮、文本字段和布局以获得正确的定位。在 ASP.NET 中有类似的方法吗？如果不是，还有什么其他方式可以实现这种布局和定位？

谢谢

Answer 1

这样做，并使用display: table

.tbl {
  display: table;
}
.tbl > div {
  display: table-row;
}
.tbl > div > * {
  display: table-cell;
}
.tbl > div > span {
  text-align: right;
  padding-right: 10px;
}

<div class="tbl">
  <div>
    <span>Name/Company:</span>
    <input type="text" ID="TextBox1">
  </div>
  <div>
    <span>Email:</span>
    <input type="text" ID="TextBox2">
  </div>
  <div>
    <span>Message:</span>
    <input type="text" ID="TextBox3">
  </div>
</div>