Question

我在我的网站上使用Ajax control toolkit's combobox。我正在动态地将自定义类型数据绑定到它。这是我为它提供的aspx代码。

<ajaxToolkit:ComboBox ID="ddlAddAccount" runat="server" AutoPostBack="False" DropDownStyle="DropDownList" AutoCompleteMode="SuggestAppend" CaseSensitive="False" CssClass="ComboBoxStyle" ItemInsertLocation="Append"/>

以下是CSS：

.ComboBoxStyle .ajax__combobox_itemlist 
{ 
            border: 1px solid YellowGreen;  
            font-size:medium;  
            font-family:Courier New;  
            padding-left: 0px;  
            list-style:none;
            list-style-type:none; 
}

我面临的问题是，当DDL在页面上呈现时，它会在下拉列表中显示一些奇怪的框。他们似乎是子弹。但是尽管把list-style-type：none;在css中，输出没有变化。也就是说，奇怪的盒子仍然出现。这是渲染的组合框的屏幕剪辑：

enter image description here

我甚至检查了渲染的HTML标记，看是否有任何附加的字符，但没有。＆lt; li＆gt; ＆lt; ul＆gt;中的标签tag只包含绑定的元素列表。

任何想法这可能是什么以及如何摆脱这些？我在绑定之前尝试ddlAddAccount.Items.Clear();，但这没有帮助。

非常感谢！

Answer 1

很可能一些额外的样式与你的组合框冲突。

使用Chrome中的浏览器开发人员工具（F12 developer tools in IE，Tools --> developer tools）并隔离列表中应用的CSS。

此外，组合框不会呈现为<option>。它应该呈现为无序列表（<ul><li>...</li>）

Answer 2

如果确实是列表项目，您可以尝试在样式中加入！important ，以确保没有应用列表样式。

.ComboBoxStyle .ajax__combobox_itemlist
{
    border: 1px solid YellowGreen;
    font-size: medium;
    font-family: Courier New;
    padding-left: 0px;
    list-style-type: none !important; /* Add the important here */
}

我无法重现您的问题，但您必须将某种css样式应用于导致此问题的ul或li标记。我知道你提到你在浏览器中取消选中控件上的所有样式但是必须有你错过的东西。

希望这有效。

Ajax控件工具包组合框在下拉列表中显示奇怪的子弹

2 个答案: