下面的代码有几个问题。首先，我为我的 2 个列表框指定的 CSS 样式不起作用...基本上没有应用列表框的 CSS 样式。第二个问题是我希望面板“pnlSelAccounts”中的 2 个主要 div 并排显示，但它们相互堆叠。第一个 div 应该包含第一个文本框、标签、按钮和 2 个列表框，第二个应该包含 2 个较小的面板及其内容。任何帮助将不胜感激!
<style type="text/css">
body
{
background-color: #232323;
font-family: Knowledge Regular;
}
legend
{
color: #D4D4D4;
}
.UpperPanel
{
margin-left: 10px;
margin-right: 10px;
padding-top: 10px;
}
.RightPanel
{
margin-right: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
.ListBox_Default
{
color: #D4D4D4;
background-color: #232323;
border: solid 2px #000000;
padding-left: 20px;
height: 250px;
width: 250px;
}
fieldset
{
border: solid 2px #000000;
width: 100%;
}
.DisplayTextBoxStyle
{
color: #00FFFF;
font-weight:bold;
background-color:transparent;
border: 0px solid;
width: 65%;
}
.InputTextBoxStyle
{
color: #D4D4D4;
background-color: #232323;
border: solid 2px #000000;
}
.TabStyle .ajax__tab_header
{
display: block;
}
.TabStyle .ajax__tab_tab
{
color: #FF9900;
}
.TabStyle .ajax__tab_header .ajax__tab_outer
{
color: #D4D4D4;
font-family: Knowledge Regular;
padding-left: 10px;
margin-right: 3px;
border:solid 2px #000000;
}
.TabStyle .ajax__tab_header .ajax__tab_inner
{
border-color: #666;
font-family: Knowledge Regular;
color: #666;
padding: 3px 10px 2px 0px;
}
.TabStyle .ajax__tab_hover .ajax__tab_outer
{
background-color:#525252;
}
.TabStyle .ajax__tab_hover .ajax__tab_inner
{
color: #FFF;
}
.TabStyle .ajax__tab_active .ajax__tab_outer
{
font-family: Knowledge Bold;
background-color: #525252;
}
.TabStyle .ajax__tab_active .ajax__tab_inner
{
font-family: Knowledge Bold;
color: #000;
border-color: #333;
}
.TabStyle .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;
width: 100%;
height: 100%;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Image ID="imgTRLogo" runat="server" style="z-index: 1;"
ImageAlign="Right" ImageUrl="~/Images/Logo.png"/>
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server"/>
<p>
<asp:Label ID="lblHeader" runat="server" Font-Bold="True"
style="z-index: 1; left: 10px; top: 40px; position: absolute; width: 1009px; margin-top: 0px; font-family: 'Knowledge Bold'; color: #FF9900; font-size: large;"
Text="ORDER FORM GENERATOR">
</asp:Label>
</p>
<ajaxToolkit:TabContainer ID="tabMainContainer" runat="server" ActiveTabIndex="1"
style="z-index: 1; left: 20px; top: 100px; position: absolute;" CssClass="TabStyle">
<ajaxToolkit:TabPanel runat="server" HeaderText="Build New Order Form" ID="tbnAcctData" TabIndex="0">
<ContentTemplate>
<asp:Panel ID="pnlSelAccounts" runat="server" GroupingText="Select Accounts" CssClass="UpperPanel"
Style="width: 100%" HorizontalAlign="Left">
<div>
<div style="float:left; margin-left: 10px;">
<asp:Label ID="lblSearchAcctNo" runat="server" Text="Account Number:"/>
<asp:TextBox ID="txtSearchAcctNo" runat="server" CssClass="InputTextBoxStyle"/>
<asp:Button ID="btnSearchAccts" runat="server" Text="Search" />
</div>
<br />
<br />
<div>
<div style="float:left; margin-left: 10px; padding-right: 10px;">
<asp:Label ID="lblChildAccts" runat="server" Text="Location Accounts"/>
<br />
<asp:ListBox ID="lstSubAccounts" runat="server" SelectionMode="Multiple" CssStyle="ListBox_Default"/>
</div>
<div>
<asp:Label ID="lblLEAccts" runat="server" Text="Legal Entities"/>
<br />
<asp:ListBox ID="lstLEAccts" runat="server" AutoPostBack="True" CssStyle="ListBox_Default"/>
</div>
</div>
</div>
<div>
<asp:Panel ID="pnlLEAddress" runat="server" GroupingText="Legal Entity Address"
style="margin-left: 10px; margin-bottom: 10px; margin-right: 10px; width: 50%;">
<div style="float:left; margin-left: 10px; padding-bottom: 10px; padding-top: 10px;">
<asp:Label ID="lblLEName" runat="server" Style="width: 30%" Text="Legal Entity Name:"/>
<asp:TextBox ID="txtLEName" runat="server" CssClass="DisplayTextBoxStyle"/>
<br />
<asp:Label ID="lblStreet" runat="server" Style="width: 30%" Text="Street Address:"/>
<asp:TextBox ID="txtLEStreet" runat="server" CssClass="DisplayTextBoxStyle"/>
<br />
<asp:Label ID="lblCityStateZip" runat="server" Style="width: 30%" Text="City, State & Zipcode:"/>
<asp:TextBox ID="txtLECityStateZip" runat="server" CssClass="DisplayTextBoxStyle"/>
<br />
<asp:Label ID="lblCountry" runat="server" Style="width: 30%" Text="Country:"/>
<asp:TextBox ID="txtLECountry" runat="server" CssClass="DisplayTextBoxStyle"/>
</div>
</asp:Panel>
<asp:Panel ID="pnlMSC" runat="server" GroupingText="Main Sales Contact"
style="margin-left: 10px; margin-bottom: 10px; margin-right: 10px; width: 50%;">
<div style="float:left; margin-left: 10px; padding-bottom: 10px; padding-top: 10px;">
<asp:Label ID="lblMSCSalutation" runat="server" Style="width: 20%" Text="Salutation:"/>
<asp:TextBox ID="txtMSCSalutation" runat="server" CssClass="DisplayTextBoxStyle"/>
<br />
<asp:Label ID="lblMSCFirstName" runat="server" Style="width: 20%" Text="First Name:"/>
<asp:TextBox ID="txtMSCFirstName" runat="server" CssClass="DisplayTextBoxStyle"/>
<br />
<asp:Label ID="lblMSCLastName" runat="server" Style="width: 20%" Text="Last Name:"/>
<asp:TextBox ID="txtMSCLastName" runat="server" CssClass="DisplayTextBoxStyle"/>
<br />
<asp:CheckBox ID="chkCustomMSC" runat="server" Text="Select Main Sales Contact"/>
<br />
<asp:Panel ID="pnlCustomerMSC" runat="server" GroupingText="Main Sales Contact"
style="margin-bottom: 10px; margin-right: 10px; width: 50%;">
<div style="float:left; margin-left: 10px; padding-bottom: 10px; padding-top: 10px;">
<asp:Label ID="lblCustMSCSalutation" runat="server" Style="width: 30%" Text="Salutation:"/>
<asp:DropDownList ID="drpMCSSalutation" runat="server" />
<br />
<asp:Label ID="lblCustMSCFirstName" runat="server" Style="width: 30%" Text="First Name:"/>
<asp:TextBox ID="txtCustMSCFirstName" runat="server" CssClass="InputTextBoxStyle"/>
<br />
<asp:Label ID="lblCustMSCLasstName" runat="server" Style="width: 30%" Text="Last Name:"/>
<asp:TextBox ID="txtCustMSCLastName" runat="server" CssClass="InputTextBoxStyle"/>
</div>
</asp:Panel>
</div>
</asp:Panel>
</div>
</asp:Panel>
<br />
<asp:Panel ID="pnlSelectProducts" runat="server" GroupingText="Select Products" CssClass="RightPanel">
</asp:Panel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="tbnGeneratedForms" runat="server" HeaderText="Generated Forms" TabIndex="1">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>
最佳答案
我认为您需要 CSSClass，而不是 CSSStyle。
目前，你正在输出
style="ListBox_Default"
CSSClass 将输出
class="ListBox_Default"
关于html - 列表框 CSS 标记不起作用，div 不并排显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23205783/