3

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

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

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

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

<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 文件的地方吗？我收到一条错误消息，说元素“链接”不能嵌套在元素“div”中？

4

2 回答 2

2

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

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

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

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

  2. 将以下 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 */
}

更新

小提琴示例

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

这会给你你想要的样子。

于 2013-03-08T03:16:04.013 回答
0

将此 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">
于 2013-03-08T05:06:50.257 回答