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

我试图在搜索栏上的下拉列表中的不同选项之间添加空格。目前，所有选项都集中在一起，因此选择特定选项是不可能的，而且这些单词无法辨认。您可以在中看到代码/示例

我尝试过搞乱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>

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

因此，我需要在不同的下拉选项之间添加空格，类似于谷歌作为搜索建议给出的建议/下拉列表

注意：我使用的是jQueryUI库。

---

查看位于的笔，您需要移除

位置：绝对

从

.ui菜单项

停止每个菜单项重叠在最后一个菜单项之上

.ui菜单项{
字体系列：“投石机MS”，“Lucida Grande”，“Lucida Sans Unicode”，“Lucida Sans”，Tahoma，Sans serif；
字号：16pt；
宽度：500px；
高度：26px；
颜色：蓝色；
/*位置：绝对；您需要从
.ui菜单项
中删除
位置：绝对；
，以停止每个菜单项重叠在最后一个菜单项之上

.ui菜单项{
字体系列：“投石机MS”，“Lucida Grande”，“Lucida Sans Unicode”，“Lucida Sans”，Tahoma，Sans serif；
字号：16pt；
宽度：500px；
高度：26px；
颜色：蓝色；
/*位置：绝对；您需要从
.ui菜单项
中删除
位置：绝对；
，以停止每个菜单项重叠在最后一个菜单项之上

.ui菜单项{
字体系列：“投石机MS”，“Lucida Grande”，“Lucida Sans Unicode”，“Lucida Sans”，Tahoma，Sans serif；
字号：16pt；
宽度：500px；
高度：26px；
颜色：蓝色；
/*位置：绝对；您需要从
.ui菜单项
中删除
位置：绝对；
，以停止每个菜单项重叠在最后一个菜单项之上

.ui菜单项{
字体系列：“投石机MS”，“Lucida Grande”，“Lucida Sans Unicode”，“Lucida Sans”，Tahoma，Sans serif；
字号：16pt；
宽度：500px；
高度：26px；
颜色：蓝色；
/*position:absolute；从您的CSS中删除
position:absolute
，它就会起作用

绝对位置元素相对于浏览器起点的位置。因此，指定此位置后，您将告诉浏览器将元素放置在wrt浏览器的固定位置（默认情况下为0,0）

阅读更多详细信息
从CSS中删除
position:absolute
，这样就可以了

绝对位置元素相对于浏览器起点的位置。因此，指定此位置后，您将告诉浏览器将元素放置在wrt浏览器的固定位置（默认情况下为0,0）

阅读更多详细信息
从CSS中删除
position:absolute
，这样就可以了

绝对位置元素相对于浏览器起点的位置。因此，指定此位置后，您将告诉浏览器将元素放置在wrt浏览器的固定位置（默认情况下为0,0）

阅读更多详细信息
从CSS中删除
position:absolute
，这样就可以了

绝对位置元素相对于浏览器起点的位置。因此，指定此位置后，您将告诉浏览器将元素放置在wrt浏览器的固定位置（默认情况下为0,0）

阅读更多详情
@maudulus-无忧：）@maudulus-无忧：）@maudulus-无忧：）@maudulus-无忧：）
.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;
}