开发中对齐texbox的问题 [英] problem in aligning texboxes in dev

问题描述

谁能告诉我CSS样式以适当的方式对齐它们.对我来说真是一团糟.

开发人员样式以使其对齐..

can any one tell me the css style to align them in a proper way. its really messy for me..

dev style to align them..

<div> 
    First Name:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        
    Last Name:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        
    Company:<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        
    Address:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
        
    Country:<asp:DropDownList ID="dpcountry" runat="server">
                <asp:ListItem>Pakistan</asp:ListItem>
                <asp:ListItem>India</asp:ListItem>
                <asp:ListItem>Sri Lanka</asp:ListItem>
                <asp:ListItem>Bangladesh</asp:ListItem>
            </asp:DropDownList>
    
    City:<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
        
    Province:<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
        
    ZipCode:<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
        
    Telephone:<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
        
    Fax:<asp:TextBox ID="TextBox9"  runat="server"></asp:TextBox>
</div>

推荐答案

body {
    background-color: #DBE8F9;
    font: 11px/24px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #5A698B;
}

#title {
    width: 326px;
    height: 26px;
    color: #5A698B;
    font: bold 12px/18px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding-top: 5px;
    background: transparent url("images/bg_legend.gif") no-repeat;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

form {
    width: 327px;
    margin-right: 231px;
}

.col1 {
    text-align: right;
    width: 135px;
    height: 31px;
    margin: 0;
    float: left;
    margin-right: 2px;
    background: url(images/bg_label.gif) no-repeat;
}

.col2 {
    width: 113px;
    height: 21px;
    display: block;
    float: left;
    margin: 0;
    background: url(images/bg_textfield.gif) no-repeat;
}

.col2comment {
    width: 195px;
    height: 98px;
    margin: 0;
    display: block;
    float: left;
    background: url(images/bg_textarea.gif) no-repeat;
}

.col1comment {
    text-align: right;
    width: 135px;
    height: 98px;
    float: left;
    display: block;
    margin-right: 2px;
    background: url(images/bg_label_comment.gif) no-repeat;
}

div.row {
    clear: both;
    width: 136px;
    height: 23px;
    width: 158px;
    height: 40px;
}

l(images/bg_submit.gif) no-repeat;
    padding-top: 5px;
    clear: both;
}

.input {
    background-color: #fff;
    font: 11px/14px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #5A698B;
    margin: 4px 0 5px 8px;
    padding: 1px;
    border: 1px solid #8595B2;
}

.textarea {
    border: 1px solid #8595B2;
    background-color: #fff;
    font: 11px/14px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #5A698B;
    margin: 4px 0 5px 8px;
}

这是给上校1的:

This Is For Col 1:

<div class="row"><label class="col1">Frist Name</label> </div>

对于第二上校，请使用...

And For 2nd Col. Use This...

<span class="col2">
                            <asp:TextBox ID="txtfname" runat="server"

                         CssClass="input" Height="21px" Width="104px"></asp:TextBox></span>

这篇关于开发中对齐texbox的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！