Question

早期的组合框工作正常。但是在将CSS应用于网页后，组合列表项目列表会在页面上的其他位置丢弃。恰好将css应用于页面。网页图片如下所示：

enter image description here

我使用了以下css。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<style type="text/css">
    body {
        font-size: .813em;
        max-width: 1244px;
        padding-left: 12px;
        padding-right: 12px;
        margin: 0;
        margin-left: auto;
        margin-right: auto;
        font: .875em/1.35 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
        background-color:white;
        color: #2a2a2a;   
        line-height: 1.538;    
        height: 100%;
        display: block;
    }

    #Container {
        /*max-width:90%;*/
        clear:right;
        margin-right:auto;
        margin-left:auto;  
        min-width: inherit;
        position: relative;   
        width:inherit; 
    }

    #ux-header {
        padding: 20px 0 0;
        clear: right;
        font-size: .813em;
        line-height: 1.538;
        font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
        color: #959595;
        position: relative;
        z-index: 9998;
        background-color:#eee;
    }

        #ux-header .BrandLogo {
            margin: 0;
            float: left;
            height: 40px;
            overflow: hidden;
        }

        #ux-header .GlobalBar {
            margin: 0;
            overflow: hidden;
            width: 330px;
            width: auto;
            float: right;
            line-height: 1.25;
            font-size: 12px;
        }

        #ux-header .internav {
            padding: 5px 0 12px;
            margin: 0;
            line-height: 1.75;
            font: 14px 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
            border-bottom: solid 1px #ccc;
            clear: both;
        }

    div#body {
        padding-top: 35px;
        clear: both;
        min-width:inherit;
        max-height:100%;
        width:auto;
    }

    div#form {
        margin: 0;
        position:relative;    
        max-width:initial;
       width:auto;       
    }

    div#leftNav {
        width: auto;
        margin: 0 -1px 0 0;
        border-right: 1px solid #b6b6b6;
        float: left;
        position: relative;
    }

        div#leftNav.leftNavResize1 {
          width:750px;
        }
    div#Content1.leftform {    
        float:left;
        margin:10px 0px 10px 20px;

    }
    div#Content2.rightImage {
        float:left;
        margin:10px 60px 10px 0px;
        width:auto;    
        text-align:center;
    }

    div#form {
        width:60%;
        float:left;
    }

    div#content {
        border-left: 1px solid #b6b6b6;
        padding-left: 20px;
        margin: 0;
        overflow-x: auto!important;
        min-height: 300px;
        word-wrap: break-word;
        width:auto;    
    }

    .topic .title {
        font-family: Segoe UI,Verdana,Arial;
    }

    h1, h1.heading {
        font-size: 3em;
        color: #707070;
    }

    h1 {
        color: #707070;
        font: 100 2.571em/1.167 'Segoe UI Light','Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
        margin-top: 0;
        display: block;
        font-size: 2em;
        /*-webkit-margin-before: 0.67em;*/
        -webkit-margin-after: 0.67em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        /*font-weight: bold;*/
    }


    input[type="text"] {
         border-radius: 5px;
         border: 1px solid #999;
         font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
         width:197px;
         padding:3px;
         border-spacing:3px;
         margin-left:0px;
         margin-right:auto;
    }

        input[type="text"]:focus {
            outline: none;
            box-shadow: 0px 0px 5px #61C5FA;
            border: 1px solid #5AB0DB;
            border-radius: 5px;
            font-family:inherit;
        }

        input[type="text"]:hover {
            border: 1px solid #999;
            border-radius: 5px;
            box-shadow: 0px 0px 5px #61C5FA;
            font-family:inherit;
        }

        input[type="text"]:focus:hover {
            outline: none;
            box-shadow: 0px 0px 5px #61C5FA;
            border: 1px solid #5AB0DB;
            border-radius: 5px;
            font-family:inherit;
        }

    select {
         border-radius: 5px;
         border: 1px solid #999;
         font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
         width:204px;
         padding:3px;
         border-spacing:3px;
         margin-left:0px;
         margin-right:auto;
    }
        select:focus {
            outline: none;
            box-shadow: 0px 0px 5px #61C5FA;
            border: 1px solid #5AB0DB;
            border-radius: 5px;
            font-family:inherit;
        }

        select:hover {
            border: 1px solid #999;
            border-radius: 5px;
            box-shadow: 0px 0px 5px #61C5FA;
            font-family:inherit;
        }

        select:focus:hover {
             outline: none;
            box-shadow: 0px 0px 5px #61C5FA;
            border: 1px solid #5AB0DB;
            border-radius: 5px;
            font-family:inherit;
        }

    textarea {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 1px solid #999;
        font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif;
        width: 200px;
        height:45px;
        border-spacing:3px;
        margin-left:0px;
         margin-right:auto;
    }

        textarea:focus {
            outline: none;
            box-shadow: 0px 0px 5px #61C5FA;
            border: 1px solid #5AB0DB;
            border-radius: 5px;
            font-family:inherit;
        }

        textarea:hover {
            border: 1px solid #999;
            border-radius: 5px;
            box-shadow: 0px 0px 5px #61C5FA;
            font-family:inherit;
        }

        textarea:focus:hover {
             outline: none;
            box-shadow: 0px 0px 5px #61C5FA;
            border: 1px solid #5AB0DB;
            border-radius: 5px;
            font-family:inherit;
        }

    table {
        border-spacing:2.5px;
        column-width:auto;
        margin:auto;    
        vertical-align:middle;
    }

html代码

<body class="body">
    <form id="form1" runat="server">
    <div id="Container">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <div id="ux-header" class="Chrome ltr">
            <div class="BrandLogo">
            <a href="http://msdn.microsoft.com/en-us">
                <span class="BrandLogoImage msdn" title="MSDN"></span>
            </a>
            </div>
            <div class="GlobalBar">

            </div>
            <div class="internav">            


            </div>
        </div>
        <div id="body">        
            <div id="leftNav" class="leftNavResize1">
                <div class="topic" xmlns="http://www.w3.org/1999/xhtml">
                    <h1 class="title">Pest Master</h1>                   
                </div> 
                <div id="form">
                    <table style="width:auto;float:left">
                        <tr>
                            <td style="width:25%">
                                <asp:Label ID="Label1" runat="server" Text="Pest Classification"></asp:Label>
                            </td>
                            <td style="width:45%">
                                <asp:DropDownList ID="ComboBox1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged"></asp:DropDownList>
                            </td>                            
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label2" runat="server" Text="Pest Name"></asp:Label>
                            </td>
                            <td>
                                <asp:ComboBox ID="ComboBox2" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ComboBox2_SelectedIndexChanged" Width="172px"></asp:ComboBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label3" runat="server" ForeColor="" Text="Measurement Unit"></asp:Label>
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label4" runat="server" Text="Pest Description"></asp:Label>
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="Label5" runat="server" Text="Pest Function"></asp:Label>
                            </td>
                            <td>
                                <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
                            </td>
                        </tr>
                        <tr>    
                            <td>
                                <asp:Label ID="Label6" runat="server" Text="Function Description"></asp:Label>
                            </td>
                            <td>
                                <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine"></asp:TextBox>                                
                            </td>
                        </tr>
                <%--         <tr>
                            <td >

                            </td>
                            <td>

                            </td>
                        </tr>
           <tr>
                <td>
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/cl.png" AlternateText="abc" Width="150px" Height="40px" OnClick="ImageButton1_Click"/>
                </td>
                <td>
                    <asp:TextBox ID="TextBox4" runat="server" TextMode="MultiLine" Width="175px"></asp:TextBox>
                </td>
            </tr>--%>
                    </table>
                    <div style="width:22%;float:left;margin-top:5px;margin-left:70px">
                        <asp:Button ID="Button1" runat="server" CssClass="pivot-switch" Text="Save" ValidationGroup="validate" OnClick="Button1_Click" />
                    </div>
                    <div style="width:22%;float:left;margin-top:5px;margin-left:0px">
                        <asp:Button ID="Button4" runat="server" CssClass="pivot-switch" Text="Delete" OnClick="Button4_Click" />
                    </div>
                </div>               
                <div id="Content2" class="rightImage">
                         <asp:Image ID="Image1" ImageUrl="~/Images/pest2.jpg" Width="160px" runat="server" />
                    </div>               
            </div>        
            <div id="content" class="content">    
                <div>
                    <asp:GridView ID="GridView1" AutoGenerateColumns="false" CssClass="mGrid" runat="server" OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
                        <Columns>
                            <asp:TemplateField HeaderText="Sno" ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <%# ((GridViewRow)Container).RowIndex +1 %>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Pest Classification">
                                <ItemTemplate>
                                    <asp:Label ID="Label8" runat="server" Text='<%#Eval("PestClassification") %>'></asp:Label>                                    
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText ="Pest Name">
                                <ItemTemplate>
                                    <asp:Label ID="Label9" runat="server" Text='<%#Eval("PestName") %>'></asp:Label>                                   
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField Visible="false">
                                <ItemTemplate>
                                    <asp:Label ID="Label10" runat="server" Text='<%#Eval("PID") %>'></asp:Label>                                   
                                </ItemTemplate>
                            </asp:TemplateField> 
                             <asp:TemplateField  Visible="false">
                                <ItemTemplate>
                                    <asp:Label ID="Label12" runat="server" Text='<%#Eval("FunctionDescription") %>'></asp:Label>                                   
                                </ItemTemplate>
                            </asp:TemplateField> 
                             <asp:TemplateField Visible="false">
                                <ItemTemplate>
                                    <asp:Label ID="Label13" runat="server" Text='<%#Eval("MeasurementUnit") %>'></asp:Label>                                   
                                </ItemTemplate>
                            </asp:TemplateField> 
                             <asp:TemplateField Visible="false">
                                <ItemTemplate>
                                    <asp:Label ID="Label14" runat="server" Text='<%#Eval("CID") %>'></asp:Label>                                   
                                </ItemTemplate>
                            </asp:TemplateField>        
                             <asp:TemplateField Visible="false">
                                <ItemTemplate>
                                    <asp:Label ID="Label15" runat="server" Text='<%#Eval("GroupID") %>'></asp:Label>                                   
                                </ItemTemplate>
                            </asp:TemplateField>  
                               <asp:TemplateField Visible="false">
                                <ItemTemplate>
                                    <asp:Label ID="Label16" runat="server" Text='<%#Eval("PestDescription") %>'></asp:Label>                                   
                                </ItemTemplate>
                            </asp:TemplateField>                  
                        </Columns>
                    </asp:GridView>   
                 </div>                                                                             
            </div>
        </div>
        <!-- ModalPopupExtender -->
        <asp:HiddenField ID="HiddenField1" runat="server" />
         <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"  
                PopupControlID="Panel2" TargetControlID="HiddenField1"
                CancelControlID="btnClose" BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>
         <asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" align="center" style = "display:none">
            record successfully updated<br />            
            <asp:Button ID="btnClose" runat="server" Text="Close" />            
        </asp:Panel>
        <!-- ModalPopupExtender -->

         <!-- ModalPopupExtender -->

         <asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server"  
                PopupControlID="Panel1" TargetControlID="Button3"
                CancelControlID="btnClose" BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>
         <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
            <table>
                <tr>
                    <td>
                        <asp:Label ID="Label7" runat="server" Text="abc"></asp:Label></td>
                    <td>
                        <asp:TextBox ID="TextBox5" runat="server" TextMode="MultiLine"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="Button3" runat="server" Text="Save" /></td>
                    <td><asp:Button ID="Button2" runat="server" Text="Close" />  </td>
                </tr>
            </table>            

        </asp:Panel>
        <!-- ModalPopupExtender -->

        <!--confirmbuttonextender-->
        <asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" TargetControlID="Button4" ConfirmText="do u want to delete" runat="server"></asp:ConfirmButtonExtender>
        <!--confirmbuttonextender-->


        <asp:Panel ID="Panel3" runat="server">
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ValidationGroup="validate" ControlToValidate="ComboBox1" SetFocusOnError="true" InitialValue="0" Display="None" ErrorMessage="Select One Option"></asp:RequiredFieldValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" TargetControlID="RequiredFieldValidator1" runat="server"></asp:ValidatorCalloutExtender>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ValidationGroup="validate" ControlToValidate="ComboBox2" SetFocusOnError="true" InitialValue="-1" Display="None" ErrorMessage="Select One Option or enter pest name"></asp:RequiredFieldValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" TargetControlID="RequiredFieldValidator2" runat="server"></asp:ValidatorCalloutExtender>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ValidationGroup="validate" ControlToValidate="TextBox1" SetFocusOnError="true" Display="None" ErrorMessage="enter measurement unit"></asp:RequiredFieldValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" TargetControlID="RequiredFieldValidator3" runat="server"></asp:ValidatorCalloutExtender>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ValidationGroup="validate" ControlToValidate="TextBox2" SetFocusOnError="true" Display="None" ErrorMessage="enter pest description"></asp:RequiredFieldValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender4" TargetControlID="RequiredFieldValidator4" runat="server"></asp:ValidatorCalloutExtender>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ValidationGroup="validate" ControlToValidate="DropDownList1" SetFocusOnError="true" InitialValue="0" Display="None" ErrorMessage="Select One Option"></asp:RequiredFieldValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender5" TargetControlID="RequiredFieldValidator5" runat="server"></asp:ValidatorCalloutExtender>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ValidationGroup="validate" ControlToValidate="TextBox3" SetFocusOnError="true" Display="None" ErrorMessage="enter functional description"></asp:RequiredFieldValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender6" TargetControlID="RequiredFieldValidator6" runat="server"></asp:ValidatorCalloutExtender>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ValidationGroup="validate" ValidationExpression="^[a-zA-Z0-9\s\.]*$" Display="None" SetFocusOnError="true" ControlToValidate="ComboBox2" ErrorMessage="invalid input"></asp:RegularExpressionValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender10" TargetControlID="RegularExpressionValidator4" runat="server"></asp:ValidatorCalloutExtender>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationGroup="validate" ValidationExpression="^[a-zA-Z0-9\s\.]*$" Display="None" SetFocusOnError="true" ControlToValidate="TextBox1" ErrorMessage="invalid input"></asp:RegularExpressionValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender7" TargetControlID="RegularExpressionValidator1" runat="server"></asp:ValidatorCalloutExtender>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ValidationGroup="validate" ValidationExpression="^[a-zA-Z0-9\s\.]*$" Display="None" SetFocusOnError="true" ControlToValidate="TextBox2" ErrorMessage="invalid input"></asp:RegularExpressionValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender8" TargetControlID="RegularExpressionValidator2" runat="server"></asp:ValidatorCalloutExtender>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ValidationGroup="validate" ValidationExpression="^[a-zA-Z0-9\s\.]*$" Display="None" SetFocusOnError="true" ControlToValidate="TextBox3" ErrorMessage="invalid input"></asp:RegularExpressionValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender9" TargetControlID="RegularExpressionValidator3" runat="server"></asp:ValidatorCalloutExtender>
        </asp:Panel>
    </div>
    </form>
</body>

请提出建议。

css没有在ajax组合框上工作

0 个答案: