css: comment formater l'écran d'entrée de contact

Question

J'essaye de bien formater l'écran de contact dans ma page aspx en utilisant CSS. Avec le code suivant, je suis incapable de cliquer sur le txtEmailAddress. Si je retire un padding: 100px de l'élément txtSubject Span, alors je peux cliquer sur txtEmailaddress et éditer. s'il vous plaît aider ...

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

Answer 1

j'ai essayé de copier-coller et vécu le même comportement, à savoir avec un rembourrage sur la durée de sujet que je ne pouvais pas cliquer sur txtEmailAddress. Je cours IE8 sur Vista SP1 si cela aide du tout. J'ai également remarqué que les zones de texte n'étaient pas alignées.

Alors qu'il ne répond pas à votre question, avez-vous pensé à utiliser Label et à les styliser? Le formulaire sera plus accessible de cette façon. Vous pouvez en savoir plus sur cette approche sur alistapart here:

Answer 2

Peut-être le suivant serait selon vos besoins mieux:

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

Vous pouvez ensuite ajouter votre mise en page en utilisant CSS aux éléments fieldset, étiquette et entrée spécifique, par exemple

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

fieldset input 
{ 
    display: inline; 
} 

ou une variante de celui-ci.