开发者

ASP.NET - how to use CSS to align ASP.NET controls in a data entry situtaion?

开发者 https://www.devze.com 2023-01-26 06:29 出处:网络
I have a standard data-entry type form built in ASP.NET. I am pretty green with CSS and am trying to line up the labels and text fields on the form.

I have a standard data-entry type form built in ASP.NET. I am pretty green with CSS and am trying to line up the labels and text fields on the form.

I am using the standard ASP.NET controls.

I know from my CSS book and web sites that I could use t开发者_如何转开发he label for="" with the name of an input text box to follow and float the labels but I don't how to do this with ASP.NET controls.** This is what I am trying to work with:

<div class="spacer1em"></div>
<div><span>Hotel:</span> <asp:TextBox ID="txtHotel" runat="server" /> <asp:LinkButton ID="lnkMap" runat="server">Map</asp:LinkButton></div>
<div><span>Address:</span><asp:TextBox ID="txtAddress" runat="server" /></div>
<div><span>Address:</span><asp:TextBox ID="txtAddress2" runat="server" /></div>
<div><span>City:</span> <asp:TextBox ID="txtCity" runat="server" /> <span>State:</span><asp:TextBox ID="txtState" runat="server" /> <span>Zip:</span> <asp:TextBox ID="txtZip" runat="server" /></div>
<div><span>Country:</span> <asp:TextBox ID="txtCountry" runat="server" /></div>
<div><span>Phone:</span> <asp:TextBox ID="txtPhone" runat="server" /> <span>Fax:</span><asp:TextBox ID="txtFax" runat="server" /></div>
<div><span>Type:</span><asp:TextBox ID="txtType" runat="server" /></div>
<div><span>Comments:</span> <asp:TextBox ID="txtComments" runat="server" /></div>


Here is the method I use.

<div class="row"> 
  <div class="label"> 
    <asp:Label ID="lblHotel" Text="Hotel" runat="server" AssociatedControlID="txtHotel" />:
  </div> 
  <div class="value"> 
    <asp:TextBox ID="txtHotel" runat="server" /> 
  </div> 
</div > 
<style type="text/css">
    .row { clear: both; width: 100%; overflow: hidden; margin: 5px 0; } 
    .label { float: left; text-align: right; margin-right: 10px; width: 150px; } 
    .value { float: left; text-align: left; } 
</style> 
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号