早期的组合框工作正常。但是在将 css 应用到网页后，组合框 itemlist 会落在页面上的其他位置。它恰好将css应用于页面。网页图片如下所示：
我用过以下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>
请提出一些建议。