Question

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

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

我想将文本框对齐。我还希望标签/单词对齐文本框的左侧。如下所示：

Name/Company:[TextBox1]

       Email:[TextBox2]

     Message:[TextBox3          ]

             [                  ]

             [                  ]

             [                  ]

             [                  ]

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

Name/Company:[TextBox1]

Email:[TextBox2]

        [TextBox3          ]

        [                  ]

        [                  ]

        [                  ]

Message:[                  ]

代码：

<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

＆＃13;

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

＆＃13;

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

＆＃13;

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

对齐ASP.NET Texbox控件

2 个答案: