在搜索栏下拉选项之间添加空格

Question

我正在尝试在搜索栏的下拉列表中的不同选项之间添加空格。目前，所有选项都混在一起，因此选择一个特定的选项是不可能的，而且这些词语难以辨认。您可以在http://codepen.io/anon/pen/fGdKs

查看代码/示例

我已经尝试过搞乱CSS的很多功能，例如边距，位置，甚至尝试调整.ui-autocomplete li。 CSS在这里：

input { 
    border: 0;
    width: 500px;
    height: 38px;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size:16pt;
}

.ui-menu-item {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size:16pt;
    width: 500px;
    height: 26px;
    color: blue;
    position: absolute;
    border-color: #66b1ee;
    -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    display: block;
    border: 5px outset transparent;
    top: 8px;
    display: block;
}

搜索栏HTML如下：

<label for="tags"><form class="searchbox ui-widget" action=""><input id="tags" type="search" placeholder="Select a programming language." /></label></form>

Javascript如下：

$(document).ready(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
    });
  });

因此，我需要在不同的下拉选项之间添加空格，类似于Google提供的建议/下拉菜单作为搜索建议。

注意：我正在使用jQuery ui库。 请参阅http://codepen.io/anon/pen/fGdKs

处的笔

Answer 1

您需要从position:absolute;移除.ui-menu-item以停止覆盖在最后一个上方的每个菜单项。

Demo CodePen

.ui-menu-item {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size:16pt;
    width: 500px;
    height: 26px;
    color: blue;
    /* position: absolute;  <----remove! */
    border-color: #66b1ee;
    -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    display: block;
    border: 5px outset transparent;
    top: 8px;
    display: block;
}

Answer 2

从CSS中删除position:absolute，它就可以了。

参考浏览器起点的绝对位置元素因此指定了这一点，你告诉它将元素放在浏览器的固定位置（默认为0,0）。

阅读this了解更多详情