Asp.net 使用CSS对齐多个文本框和标签

我知道这个问题已经被问过了，我已经看了很多答案，但还没有完全弄清楚

我想对齐标签，使其最后一个字符对齐在一起（右侧对齐），并且我想对齐与其相应的文本框。以下是我在css样式表类中的内容：

.postLabel { 显示：块； 浮动：左； 文本对齐：右对齐； 左侧填充：100px； }

.postTextBox { 显示：块； 浮动：左； 文本对齐：右对齐； 左侧填充：400px； }

我看到的问题是：这是左手对齐的。标题中的T和标签2中的L对齐。标签和文本框也相互拥抱，因此它似乎不符合.CSS中的填充

最后，下面是my.aspx页面顶部的外观：

  <%@ Page Title="" Language="C#" MasterPageFile="~/Master"     ViewStateEncryptionMode="Always".... %>
  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<link href="Style.css" rel="stylesheet" type="text/css" />

---

这是添加.css文件的地方吗？我收到一个错误，说元素“link”不能嵌套在元素“div”中？

您的CSS最好在文档的头部引用

如果要右对齐这些标签，我强烈建议您执行以下操作：

创建一个div来包装标签和文本框：

<div class='label-wrapper'>
  <label>Title:</label>
  <input type='text'>
</div>

---

更新

在看到您的示例后，下面是您需要的CSS。您仍然需要像上面描述的那样将元素包装在一个div中

div.label-wrapper {
  position: relative;
  min-width: 300px;
  max-width: 400px;
  height: 24px;
  display:block;
}
div.label-wrapper > label {
  position: absolute;
  left: 0;
  width: 100px;
  text-align: right; /* not absolutely necessary, but will be if you assign a width to the label */
  white-space: nowrap; /* Again, not totally necessary, but if you run out of space otherwise you'll get multiple lines for your label */
}
div.label-wrapper > input[type=text] {
  position: absolute;
  left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
}

---

这将为您提供所需的外观。

将此css文件添加到head content placeholder中，以供尝试

<%@ Page Title="" Language="C#" MasterPageFile="~/Master"     ViewStateEncryptionMode="Always".... %>
  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 **<link href="Style.css" rel="stylesheet" type="text/css" />**
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

****

如果我把它放在那里或者放在原来的地方，似乎没有什么不同。下面的绿色斜线告诉我“链接”不能嵌套在“表单”中。文本框是什么？当我对单独的标签/文本框对这样做时，它看起来仍然是左对齐的，并且文本框似乎是错误的。我注意到的一件事是，我可以为标签设置div的宽度，如果它们相同，将使标签正确对齐。是的，这是文本框。对这个问题有一个简单的了解会对你有很大帮助，从而更好地了解你要做什么。我不知道如何使用JSFIDLE，但这里有一个来自另一个stackoverflow问题的问题：这就是我要做的。标签位于文本框旁边，右侧对齐，文本框也对齐。

div.label-wrapper {
  position: relative;
  min-width: 300px;
  max-width: 400px;
  height: 24px;
  display:block;
}
div.label-wrapper > label {
  position: absolute;
  left: 0;
  width: 100px;
  text-align: right; /* not absolutely necessary, but will be if you assign a width to the label */
  white-space: nowrap; /* Again, not totally necessary, but if you run out of space otherwise you'll get multiple lines for your label */
}
div.label-wrapper > input[type=text] {
  position: absolute;
  left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
}

<%@ Page Title="" Language="C#" MasterPageFile="~/Master"     ViewStateEncryptionMode="Always".... %>
  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 **<link href="Style.css" rel="stylesheet" type="text/css" />**
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">