如何在CSS中给出适当的余量

Question

这是我的文本框，其中我已经从数据库填充了城市名称并实现了自动完成功能..现在你可以看到自动完成框的左侧出现了一个恒定的间隙。如何从cs中删除这个差距..pls帮助

<asp:AutoCompleteExtender ID="autoComplete1" runat="server"    
 EnableCaching="true"
  BehaviorID="AutoCompleteEx"
   MinimumPrefixLength="2"
  TargetControlID="myTextBox"
   ServicePath="AutoComplete.asmx"
  ServiceMethod="GetCompletionList" 
   CompletionInterval="1000"  
   CompletionSetCount="20"
    CompletionListCssClass="autocomplete_completionListElement"
  CompletionListItemCssClass="autocomplete_listItem"
  CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
  DelimiterCharacters=";, :"
  ShowOnlyCurrentWordInCompletionListItem="true">
  <Animations>
  <OnShow>
  <Sequence>
   <%-- Make the completion list transparent and then show it --%>
  <OpacityAction Opacity="2" />
   <HideAction Visible="true" />

     <%--Cache the original size of the completion list the first time
     the animation is played and then set it to zero --%>
      <ScriptAction Script="// Cache the size and setup the initial size
                            var behavior = $find('AutoCompleteEx');
                            if (!behavior._height) {
                                var target = behavior.get_completionList();
                                behavior._height = target.offsetHeight - 2;
                                target.style.height = '0px';
                            }" />
            <%-- Expand from 0px to the appropriate size while fading in --%>
           <Parallel Duration=".4">
             <FadeIn />
        <Length PropertyKey="height" StartValue="0" 
EndValueScript="$find('AutoCompleteEx')._height" />
           </Parallel>
         </Sequence>
          <OnHide>
      <%-- Collapse down to 0px and fade out --%>
              <Parallel Duration=".4">
        <FadeOut />
        <Length PropertyKey="height" StartValueScript=
"$find('AutoCompleteEx')._height" EndValue="0" />
         </Parallel>
     </OnHide>
           </Animations>

Answer 1

可能是您的css中的空格问题，添加white-space: nowrap;并检查其是否有效

Answer 2

添加

margin : 0px!important;

How to apply css to Auto complete TextBox in ajax?

Answer 3

使用Autocomplete demo，您需要在现有样式表下方的页面中添加样式。

CSS

.autocomplete_completionListElement,
.autocomplete_completionListElement > li {
    margin:0;
}