显示项目符号的自动完成列表

本文关键字：列表 项目 符号 显示 | 更新日期: 2023-09-27 18:36:38

我有一个带有Ajax Control Toolkit AutoCompleteExtender TextBox，我在格式方面遇到了一些问题。

如果我省略CompletionListCssClass、CompletionListItemCssClass、CompletionListHighlightedItemCssClass值，它会显示正常。 但我只需要将自动完成文本向左对齐，并将TextBox的大小对齐。

如果我在站点中设置这些值.css：

.autocomplete_listItem
{
    background-color: #222;
    color: #cfdbe6;
}
.autocomplete_highlightedListItem
{
    background-color: #999;
    color: #111;
}
.autocomplete_completionListElement
{
}

然后我在名单上项目符号。

如何使项目符号不显示，将列表对齐以在TextBox正下方，列表项左对齐，并且大小与TextBox相匹配？

显示项目符号的自动完成列表

要删除项目符号，您需要做的就是向每个类添加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;
}

这是因为自动完成结果由 AJAX 扩展器作为项目符号列表返回 - 因此，如果自定义样式，则需要确保并隐藏这些项目符号。

为了告诉您如何将其与其他元素正确对齐，我需要查看您的标记（未包含在您的问题中）。

相关文章：