Question

这里可能很容易，但我无法在任何地方找到解决方案。我有一个小组坐在一个tabcontainer里面。面板的边框延伸了面板的整个宽度，但只下降了5px而不是面板的整个高度。如何让边框环绕面板的整个区域？

 <style type="text/css">
    body 
    {
        background-color: #232323;
        font-family: knowledge;
    }    
    .MyListBoxStyle
    {
        color: #D4D4D4;
        background-color: #232323;
        border-style: solid;
        border-width: 2px;
        border-color: #000000;      
    }
    .MyInputTextBoxStyle
    {
        color: #D4D4D4;
        background-color: #232323;
        border: solid 2px #000000;          
    }
    .MyDisplayTextBoxStyle
    {
        color: #D4D4D4;
        background-color:transparent;
        border: 0px solid;      
    }     
    .MyTabStyle .ajax__tab_header
    {
        display: block;
    }
    .MyTabStyle .ajax__tab_tab
    {
        color: #FF9900;
    }         
    .MyTabStyle .ajax__tab_header .ajax__tab_outer
    {
        color: #D4D4D4;
        padding-left: 10px;
        margin-right: 3px;
        border:solid 2px #000000;
    }
    .MyTabStyle .ajax__tab_header .ajax__tab_inner
    {
        border-color: #666;
        color: #666;
        padding: 3px 10px 2px 0px;
    }
    .MyTabStyle .ajax__tab_hover .ajax__tab_outer
    {
        background-color:#525252;
    }
    .MyTabStyle .ajax__tab_hover .ajax__tab_inner
    {
        color: #FFF;
    }
    .MyTabStyle .ajax__tab_active .ajax__tab_outer
    {
        font-family: Knowledge Bold;
        background-color: #525252;
    }
    .MyTabStyle .ajax__tab_active .ajax__tab_inner
    {
        font-family: Knowledge Bold;
        color: #000;
        border-color: #333;
    }
    .MyTabStyle .ajax__tab_body
    {
        font-family: Knowledge Regular;
        font-size: 10pt;
        color: #D4D4D4;
        background-color: #525252;
        border-top-width: 0;
        border: solid 2px #000000;
        border-top-color: #000000;
    }
    </style>

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <asp:Image ID="imgTRLogo" runat="server" style="z-index: 1; top: -275px; left: 615px; position: relative;"
            ImageUrl="~/Images/TR_Logo.png"/>

    <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>

    <p>
        <asp:Label ID="lblHeader" runat="server" Font-Bold="True"
            style="z-index: 1; left: 10px; top: 22px; position: absolute; width: 1009px; margin-top: 0px; font-family: 'Knowledge Bold'; color: #FF9900; font-size: large;" 
            Text="TRMA MIGRATION ORDER FORM GENERATOR">
        </asp:Label>
    </p>

    <ajaxToolkit:TabContainer ID="tabMainContainer" runat="server" ActiveTabIndex="1" 
        Height="700px" style="z-index: 1; left: 10px; top: 100px; position: absolute; font-family: 'Knowledge Regular'; color: #000000;" 
        Width="1180px" cssclass="MyTabStyle">
        <ajaxToolkit:TabPanel runat="server" HeaderText="Build New Order Form" ID="tbnAcctData" TabIndex="0">
            <ContentTemplate>
                <asp:Panel ID="pnlSelAccounts" runat="server" GroupingText="Selected Accounts" style="z-index: 1; left: 50px; top: 20px; position: absolute; height: 505px; width: 500px">

                    <asp:TextBox ID="txtSearchAcctNo" runat="server" CssClass="MyInputTextBoxStyle"
                        style="z-index: 1; left: 156px; top: 20px; position: absolute">
                    </asp:TextBox>
                    <asp:Label ID="lblSearchAcctNo" runat="server" 
                        style="z-index: 1; left: 22px; top: 20px; position: absolute; height: 13px; width: 128px" 
                        Text="Account Number:">
                    </asp:Label>
                    <asp:Label ID="lblChildAccts" runat="server" 
                        style="z-index: 1; left: 20px; top: 55px; position: absolute" 
                        Text="Child Accounts">
                    </asp:Label>
                    <asp:Label ID="lblLEAccts" runat="server" 
                        style="z-index: 1; left: 150px; top: 55px; position: absolute; height: 13px; width: 128px" 
                        Text="Legal Entities">
                    </asp:Label>                        
                    <asp:Button ID="btnSearchAccts" runat="server" 
                        style="z-index: 1; left: 316px; top: 20px; position: absolute" Text="Search" />
                    <asp:ListBox ID="lstSubAccounts" runat="server" CssClass="MyListBoxStyle"                         
                        style="z-index: 1; left: 20px; top: 70px; position: absolute; width: 125px; height: 150px;">
                    </asp:ListBox>
                    <asp:ListBox ID="lstLEAccts" runat="server" CssClass="MyListBoxStyle"                         
                        style="z-index: 1; left: 150px; top: 70px; position: absolute; width: 125px; height: 150px;" AutoPostBack="True">
                    </asp:ListBox>

                </asp:Panel>

                <asp:Panel ID="pnlLEAddress" runat="server" GroupingText="Legal Entity Address" style="z-index: 1; left: 50px; top: 230px; position: absolute; height: 50px; width: 100px">

                    <asp:TextBox ID="txtLEName" runat="server" CssClass="MyDisplayTextBoxStyle"
                        style="z-index: 1; left: 20px; top: 10px; position: absolute">
                    </asp:TextBox>
                    <asp:TextBox ID="txtLEStreet" runat="server" CssClass="MyDisplayTextBoxStyle"
                        style="z-index: 1; left: 20px; top: 40px; position: absolute">
                    </asp:TextBox>
                    <asp:TextBox ID="txtLECityStateZip" runat="server" CssClass="MyDisplayTextBoxStyle"
                        style="z-index: 1; left: 20px; top: 70px; position: absolute">
                    </asp:TextBox>
                    <asp:TextBox ID="txtLECountry" runat="server" CssClass="MyDisplayTextBoxStyle"
                        style="z-index: 1; left: 20px; top: 100px; position: absolute">
                    </asp:TextBox>

                </asp:Panel>

            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
    </form>

</body>

Answer 1

不是UI用户，但我认为您需要对输入框进行重组。这是我在弄乱的时候出现的一些样本。不确定这是否符合您的需要。

<asp:Panel ID="pnlSelAccounts" runat="server" GroupingText="Selected Accounts" Style="height: 505px; width: 500px" HorizontalAlign="Left" Direction="LeftToRight">
    <div>
        <asp:Label ID="lblSearchAcctNo" runat="server"
            Style="height: 13px; width: 128px"
            Text="Account Number:">
        </asp:Label>
        <asp:TextBox ID="txtSearchAcctNo" runat="server" CssClass="MyInputTextBoxStyle"> </asp:TextBox>
    </div>
    <br />
    <div>
        <div style="float: left; margin-right: 10px;">
            <asp:Label ID="lblChildAccts" runat="server" Text="Child Accounts"></asp:Label><br />
            <asp:ListBox ID="lstSubAccounts" runat="server" CssClass="MyListBoxStyle"
                Style="width: 125px; height: 150px;"></asp:ListBox>
        </div>
        <div style="float: left;">
            <asp:Label ID="lblLEAccts" runat="server" Style="height: 13px; width: 128px" Text="Legal Entities"></asp:Label>
            <br />
            <asp:ListBox ID="lstLEAccts" runat="server" CssClass="MyListBoxStyle"
                Style="width: 125px; height: 150px;" AutoPostBack="True"></asp:ListBox>
        </div>
    </div>
    <div style="clear: both;"></div>
    <asp:Button ID="btnSearchAccts" runat="server" Text="Search" />
</asp:Panel>

这是输出： enter image description here

面板边框未延伸到面板的整个高度

1 个答案: