css：連絡先入力画面の書式設定方法

Question

CSSを使用してaspxページの連絡先画面をうまくフォーマットしようとしています。次のコードでは、txtEmailAddressをクリックできません。もしtxtSubjectSpan要素から100pxのパディングを取り出したら、txtEmailaddressをクリックして編集することができます。私はコピー＆ペーストを試してみましたが、同じ動作を経験した、すなわち、対象のスパン上のパディングと私は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> 

Answer 1

を助けてください。私はVista SP1でIE8を実行しています。私はまた、テキストボックスが整列していないことに気づいた。

あなたの質問には答えられませんが、ラベルタグの使用とこれらのタグのスタイリングについて考えましたか？フォームはこのようにアクセスしやすくなります。あなたはおそらく、次はもっと自分の目的に合うhere:

Answer 2

alistapartにこのアプローチについての詳細を調べることができます。

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

またはその変形です。