Выравнивание нескольких текстовых полей и меток с помощью CSS

Question

Я знаю, что этот вопрос уже задан, и я просмотрел несколько ответов, но не смог точно понять это полностью.

Я хочу выровнять метки так, чтобы их последний символ был выровнен вместе (выравнивание с правой стороны), и я хочу выровнять текстовые поля, которые идут с ними. Вот то, что у меня есть в классе стилей класса css:

.postLabel { дисплей: блок; float: слева; text-align: справа; padding-left: 100px; }

.postTextBox { дисплей: блок; float: слева; text-align: справа; 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> 

Проблемы, которые я вижу: Это левая рука выровненные. T в заголовке и L в Label2 выравниваются. Ярлыки и текстовые поля обнимают друг друга, так что, похоже, они не подчиняются дополнению в .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 */ 
   } 
   

---

Update

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