0

ASPラベルとtextBoxを揃えたいのですが、CSSフォレストで負けました。コントロールの配置が悪い。（CSSコードが悪いのでごめんなさい。）コントロールをペアで並べたい（Label + TextBox）。助けてください。

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

Chrome（悪い）：

    lblrefNo        txtRefNo lblFrom
    txtFrom lblTo
                        txtTo
    lblCc    txtCc
4

1 に答える 1

2

以下の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-23T09:34:24.767 に答える