Question

我正在尝试使用CSS在我的aspx页面中很好地格式化联系人屏幕。使用以下代码，我无法单击txtEmailAddress。如果我从txtSubject Span元素中取出填充：100px，那么我可以单击进入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

我尝试复制和粘贴并经历了相同的行为，即在主题范围内填充我无法点击进入txtEmailAddress。我在vista SP1上运行IE8，如果这有帮助的话。我还注意到文本框没有对齐。

虽然它没有回答您的问题，但您是否考虑过使用Label标签并设置这些标签的样式。这种形式将更容易访问。您可以在alistapart here:

上找到有关此方法的更多信息

Answer 2

以下可能更适合您的目的：

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

或其中的一些变化。

css：如何格式化联系人输入屏幕

2 个答案: