用CSS對齊多個文本框和標籤

Question

我知道這個問題已被問及已經查看了多個答案，但還沒有完全能夠完全弄清楚這一點。

我想對齊標籤，使他們的最後一個字符對齊在一起（右側對齊），我想對齊與他們一起去的文本框。這是我在我的CSS樣式表類：

.postLabel { display：block; float：left; text-align：right; padding-left：100px; }

.postTextBox { display：block; float：left; text-align：right; padding-left：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文件？我收到一個錯誤，說元素'link'不能嵌套在元素'div'中？

Answer 1

理想情況下，您的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 */ 
   } 
   

---

更新

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