对齐 ASP.NET Texbox 控件答案

【问题标题】：Align ASP.NET Texbox Controls对齐 ASP.NET Texbox 控件
【发布时间】：2016-10-20 23:25:23
【问题描述】：

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

名称/公司：[TextBox1]
电子邮件：[TextBox2]
消息：[TextBox3]

我想将文本框相互对齐。我还希望标签/单词在文本框的左侧对齐。如下图：

名称/公司：[TextBox1]

       电子邮件：[TextBox2]

     消息：[TextBox3]

             [ ]

             [ ]

             [ ]

             [ ]

目前我的消息标签位于 textbox3 控件的最后一行，而我的其他控件的位置不正确。我现在的输出是什么：

名称/公司：[TextBox1]
电子邮件：[TextBox2]
[文本框3]
[ ]
[ ]
[ ]
消息：[]

代码：

<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 编程已有几年了。我曾经创建 JPanel 部分并在其上添加按钮、文本字段和布局以正确定位。使用 ASP.NET 是否有类似的方法？如果没有，我还有什么其他方法可以实现这种布局和定位？

谢谢

【问题讨论】：

你熟悉 CSS 吗？
是的。不过只有一点。
查找教程并从那里开始。看一些视频，读一些书......

标签： html css asp.net

【解决方案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>

【讨论】：

谢谢。 CSS 是要走的路！

【解决方案2】：

在 css 中声明类并使用 <div> 对齐您的项目：

<head>
<style>
  .cls1{
   float:left;
   width:10%;
   margin:5px;
  }
  .cls2{
   float:left;
   text-align:left;
   width:79%;
   margin:5px;
  }
</style>
</head>


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

【讨论】：