jquery - jQuery 自动完成菜单中奇怪的白框

Question

所以我在 CSS 中的自动完成样式中遇到了这个奇怪的问题。如果您查看下面的图片，您会发现这个奇怪的“白色 block ”或“空格”似乎就在所有结果的中间。

CSS:

body .ui-autocomplete {
   background-color: rgba(0, 0, 0, 1);
   border: 0px;
   border-radius: 2px;
   position: absolute;
   left: 50%;
   margin-left: -336px;
   display: none;
   outline: none;
   z-index: 1000;
}

body .ui-autocomplete .ui-menu-item .ui-corner-all {
   background-color: rgba(0, 0, 0, 0.7);
   font-family: 'Montserrat', sans-serif;
   font-weight: normal;
   font-size: 14px;
   display: block;
   clear: both;
   line-height: 20px;
   color: #fff;
   outline-color: none;
}

body .ui-autocomplete .ui-menu-item .ui-state-focus {
   background: none !important;
   background-color: none !important;
   border: 0px !important;
}

感谢您的帮助!

Answer 1

它是 body .ui-autocomplete 中的 background-color 属性。参见示例。

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $("#tags").autocomplete({
    source: availableTags
  });
});

body .ui-autocomplete {
  background: rgba(0, 0, 0, 1);
  border: 0px;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  margin-left: -336px;
  display: none;
  outline: none;
  z-index: 1000;
}
body .ui-autocomplete .ui-menu-item .ui-corner-all {
  background: rgba(0, 0, 0, 0.7);
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  font-size: 14px;
  display: block;
  clear: both;
  line-height: 20px;
  color: #fff;
  outline-color: none;
}
body .ui-autocomplete .ui-menu-item .ui-state-focus {
  background: none;
  border: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="tags">Tags:</label>
  <input id="tags">
</div>