[英]AutoComplete list showing bullets
I have a TextBox
with an Ajax Control Toolkit AutoCompleteExtender, and I'm having some issues with the formatting. 我有一个带有Ajax Control Toolkit AutoCompleteExtender的
TextBox
,我在格式化方面遇到了一些问题。
If I omit the CompletionListCssClass
, CompletionListItemCssClass
, CompletionListHighlightedItemCssClass
values, it displays fine. 如果我省略
CompletionListCssClass
, CompletionListItemCssClass
, CompletionListHighlightedItemCssClass
值,它显示正常。 But I just need to align the autocomplete text to the left, and the size of the TextBox
. 但我只需要将自动完成文本与左侧对齐,以及
TextBox
的大小。
If I set these values in the site.css: 如果我在site.css中设置这些值:
.autocomplete_listItem
{
background-color: #222;
color: #cfdbe6;
}
.autocomplete_highlightedListItem
{
background-color: #999;
color: #111;
}
.autocomplete_completionListElement
{
}
then I bullets on the list. 然后我在名单上的子弹。
How do I make the bullets not show, align the list to be right under the TextBox
, the list items left aligned, and the size to match the TextBox
? 如何使子弹不显示,将列表对齐在
TextBox
,列表项左对齐,以及与TextBox
匹配的大小?
All you need to do to remove the bullets is add list-style-type:none
to each of your classes: 要删除项目符号,您需要为每个类添加
list-style-type:none
:
.autocomplete_listItem
{
background-color: #222;
color: #cfdbe6;
list-style-type:none;
}
.autocomplete_highlightedListItem
{
background-color: #999;
color: #111;
list-style-type:none;
}
.autocomplete_completionListElement
{
list-style-type:none;
}
This is because the autocomplete results are returned as a bulleted list by the AJAX extender - so if you customize the style, you need to make sure and hide those bullets. 这是因为AJAX扩展器将自动完成结果作为项目符号列表返回 - 因此,如果您自定义样式,则需要确保并隐藏这些项目符号。
In order to tell you how to align it properly with other elements, I would need to see your markup (which is not included in your question). 为了告诉您如何将其与其他元素正确对齐,我需要查看您的标记(未包含在您的问题中)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.