使用CSS對齊表格中的ASP控件

我想對齊ASP標籤和文本框，但我丟失在CSS林中。控件的對齊很糟糕。（對不起，我的CSS代碼是壞的。）我想將這些控件放在一起（Label + TextBox）。請幫助。使用CSS對齊表格中的ASP控件

aspx頁面：

<asp:TableCell ID="tc0" runat="server" CssClass="searchTableLabelsCell"> 
    <asp:Label ID="lblrefNo" runat="server" Text="RefNo:" CssClass="searchLabel"> 
    </asp:Label> 
    <asp:TextBox ID="txtRefNo" runat="server" CssClass="textBoxes" MaxLength="50"> 
    </asp:TextBox> 
    <asp:Label ID="lblFrom" runat="server" Text="From:" CssClass="searchLabel"> 
    </asp:Label> 
    <asp:TextBox ID="txtFrom" runat="server" CssClass="textBoxes" MaxLength="50"> 
    </asp:TextBox> 
    <asp:Label ID="lblTo" runat="server" Text="To:" CssClass="searchLabel"> 
    </asp:Label> 
    <asp:TextBox ID="txtTo" runat="server" CssClass="textBoxes" MaxLength="50"> 
    </asp:TextBox> 
    <asp:Label ID="lblCc" runat="server" Text="Cc:" CssClass="searchLabel"> 
    </asp:Label> 
    <asp:TextBox ID="txtCc" runat="server" CssClass="textBoxes" MaxLength="50"> 
    </asp:TextBox> 
</asp:TableCell>

CSS

.searchTableLabelsCell 
{ 
    font: 12px Verdana; 
    width: 300px;  /* it must be 300px */ 
    border-style: none; 
    padding: 0px; 
    margin: 0px; 
    background-color: Aqua; 
} 
.searchLabel 
{ 
    float: left; 
    margin-right: 0px; 
    font: 13px Verdana; 
    text-align: right; 
    width: 50px; 
    background-color: Blue; 
    margin-top:15px; 
    position: relative; 
    left: 0px; 
} 
.textBoxes 
{ 
    width: 120px; 
    margin-top: 12px; 
    position: relative; 
    left: 0px; 
    resize: none; 
}

要求對齊：

lblrefNo txtRefNo    <!--CELL WIDTH --> 
    lblFrom txtFrom    <!--CELL WIDTH --> 
     lblTo txtTo     <!--CELL WIDTH --> 
     lblCc txtCc     <!--CELL WIDTH -->

IE（壞）：

lblrefNo   txtRefNo lblFrom txtFrom <!--CELL WIDTH --> 
    lblTo txtTo lblCc txtCc     <!--CELL WIDTH -->

鉻（壞）：

lblrefNo  txtRefNo lblFrom 
    txtFrom lblTo 
         txtTo 
    lblCc txtCc

來源

2012-08-23 Satu

-1，但不是每個開發者都出生於css-egg-shell。 – Satu

請嘗試以下HTML

風格

.searchLabel 
{ 
    display: block; 
} 
.textBoxes 
{ 
    display: block; 
}

HTML

<asp:TableCell ID="tc0" runat="server" CssClass="searchTableLabelsCell"> 
<div style="display:block; float: left; text-align: right;"> 
    <asp:Label ID="lblrefNo" runat="server" Text="RefNo:" CssClass="searchLabel"> 
    </asp:Label> 
    <asp:Label ID="lblFrom" runat="server" Text="From:" CssClass="searchLabel"> 
    </asp:Label> 
    <asp:Label ID="lblTo" runat="server" Text="To:" CssClass="searchLabel"> 
    </asp:Label> 
    <asp:Label ID="lblCc" runat="server" Text="Cc:" CssClass="searchLabel"> 
    </asp:Label> 
</div> 
<div style="display:block; float: left; margin-left: 10px; text-align: left;"> 
    <asp:TextBox ID="txtRefNo" runat="server" CssClass="textBoxes" MaxLength="50"> 
    </asp:TextBox> 
    <asp:TextBox ID="txtFrom" runat="server" CssClass="textBoxes" MaxLength="50"> 
    </asp:TextBox> 
    <asp:TextBox ID="txtTo" runat="server" CssClass="textBoxes" MaxLength="50"> 
    </asp:TextBox> 
    <asp:TextBox ID="txtCc" runat="server" CssClass="textBoxes" MaxLength="50"> 
    </asp:TextBox> 
</div> 
</asp:TableCell>

來源

2012-08-23 09:34:24 Narendra

它正在工作。謝謝！ – Satu

不客氣。 – Narendra

爲什麼分成2格？它可以用1 div來完成，允許標籤和文本框保持在一起嗎？ – Caltor

使用CSS對齊表格中的ASP控件

回答

相關問題