Question

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

我想对齐标签，以便它们的最后一个字符对齐在一起（右侧对齐），我想对齐与它们一起使用的文本框。这是我在css样式表类中的内容：

.postLabel { 显示：块; 向左飘浮; text-align：right; 填充左：100像素; }

.postTextBox { 显示：块; 向左飘浮; text-align：right; 填充左：400像素; }

<asp:Label ID="Label1" runat="server" ForeColor="Black" Text="Title: " CssClass = "postLabel"></asp:Label>

<asp:TextBox ID="titleText" runat="server" Width = "213px" CssClass = "postTextBox"></asp:TextBox>

<asp:Label ID="Label2" runat="server" ForeColor="Black" Text="Label2: " CssClass = "postLabel"></asp:Label>

<asp:TextBox ID="Text2" runat="server" Width = "213px" CssClass = "postTextBox"></asp:TextBox>

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

最后，这是我的.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'中？

Answer 1

理想情况下，您的CSS应该在文档的头部引用。

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

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

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

将以下CSS添加到样式表中：

div.label-wrapper{
  position:relative;
  width: 400px; /* Set this to however far you want that right align to be from the left */
}
div.label-wrapper > label{
  position:absolute;
  right: 0;
  height: 15px; /*Or whatever height you like */
}
div.label-wrapper > input[type=text] {
  position:absolute;
  right: 0;
  top: 15px; /* Or whatever you set the label's height to, plus any desired margin */
}

<强>更新

<强> Fiddle Example

看到你的例子后，这里是你需要的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 */
}

那会给你你想要的样子。

Answer 2

在头部内容占位符中添加此css文件以进行尝试

<%@ 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">

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

2 个答案: