CSS: как отформатировать экран ввода контакта - PullRequest
Новая
       7

CSS: как отформатировать экран ввода контакта

0 голосов
/ 11 мая 2009

Я пытаюсь красиво отформатировать экран контактов на моей странице aspx, используя CSS. С помощью следующего кода я не могу нажать на txtEmailAddress. Если я уберу padding: 100px из элемента txtSubject Span, я смогу нажать на txtEmailaddress и отредактировать. пожалуйста, помогите ... 

<div>
<span>
Your Email Address :    
</span>
<span style="padding:100px">
<asp:TextBox ID="txtEmailAddress" runat="server"></asp:TextBox>        
</span>

<br />
<span>
                    Subject :    
</span>
<span  style="padding:100px">
                <asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>        
</span>                
<br />
</div>

Ответы [ 2 ]

1 голос
/ 11 мая 2009

Возможно, следующее лучше подойдет для ваших целей: 

<fieldset>
<legend>Add a heading if you want one</legend>
<div>
<asp:Label id="lblEmail" runat="server" text="Your Email Address:" AssociatedControlID="txtEmailAddress">
</asp:Label>
<asp:TextBox ID="txtEmailAddress" runat="server"></asp:TextBox>        
</div>
<div>
<asp:Label id="lblSubject" runat="server" text="Subject:" AssociatedControlID="txtSubject">
</asp:Label>
<asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>        
</div>
</fieldset>

Затем вы можете добавить свой макет с помощью CSS в набор полей, метку и элементы ввода, например, 

fieldset label
{
  margin-right: 2em;
  width: 20em;
}

fieldset input
{
  display: inline;
}

Или какой-то другой вариант.

1 голос
/ 11 мая 2009

Я пытался копировать и вставлять и испытал то же самое поведение, то есть с отступом на предметном промежутке, я не мог нажать на txtEmailAddress Я использую IE8 на Vista SP1, если это вообще помогает. Я также заметил, что текстовые поля не были выровнены.

Хотя он не отвечает на ваш вопрос, задумывались ли вы об использовании тега Label и стилизации этих тегов. Форма будет более доступной таким образом. Вы можете узнать больше об этом подходе на alistapart здесь:

...