为什么悬停在每一行上时下拉元素会向左移动？答案

【问题标题】：Why the dropdown elements gets shifted to left on hovering on each row?为什么悬停在每一行上时下拉元素会向左移动？
【发布时间】：2017-12-14 17:13:14
【问题描述】：

我使用 jQueryUI 的 selectMenu 小部件创建了一个下拉列表，如下图所示：

下面给出了它的 HTML 代码。

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
    <select id="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="$0.00">Standard Screw Adjustment</option>
    <option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price="$6.00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price="-$4.00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>

</body>

</html>

这是此小部件的 CSS。

.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
}

.ui-menu-item .ui-menu-item-wrapper {
  display: inline-block;
  padding: 1em 2px;
}

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
  padding: 0.5em 0 0.5em 3em;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
  height: 24px;
  width: 14px;
  top: 0.1em;
}


.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  border-width: 1px 0px 1px 0px;
  border-color: #cccccc;
  background-color: #e4ebf1;
  color: #000;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
  color: #2e6d99;
}

.ui-menu-item div.ui-menu-item-wrapper {
  width: 290px;
}

.ui-menu-item .short {
  color: #2e6d99;
  font-weight: strong;
  width: 30px;
  padding-left: 0.5em;

}

.ui-menu-item .price {
  font-weight: strong;
  width: 75px;
  margin-right: -6px;

}


.overflow {
  height: 200px;
}

下面给出的是 Javascript 代码。

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-category'>" +
              item.optgroup +
              "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );

        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $("#options").mySelectMenu({
    width: 300
  });
  $("#options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

现在，我的问题是，每当我将光标悬停在任何行上时，该悬停行的元素都会被选择到其右侧。但我希望我的元素固定在该位置。我知道问题与.ui-state-active 类有关。我已经尝试了很多我知道的技巧，但没有一个对我有用。我是 CSS 的初学者。请帮忙。下面提到的是描述这些元素如何移动的图像。

谁能提供有关如何解决此问题的任何想法？

【问题讨论】：

尝试将边框改为轮廓。
您能否提供更多代码或在 Plunker 上创建一些类似的示例？例如，谁打电话给_renderMenu？这只是一个例子。请提供您的问题的工作示例。
@Chris，我已经在问题详细信息中提供了所有代码。这是我在 Codepen 中的代码的工作示例：codepen.io/DG4/pen/RjzyJv
感谢您提供实时代码。这使得发现问题变得更加容易。

标签： css drop-down-menu hover jquery-ui-selectmenu

【解决方案1】：

在 css 文件中，您需要在 .ui-state-active 类中添加 0 边距。悬停导致出现 -1 的边距。之后，当您上下悬停时，您需要阻止它跳跃。为此，您可以删除所有边框属性，并添加outline: 1px solid #ccc 属性。将您当前的 .ui-menu-item .ui-menu-item-wrapper.ui-state-active 块替换为此处的块应该可以解决您的问题（至少它们在您的 codepen 中解决了）

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  //border-width: 1px 0px 1px 0px;
  margin: 0;
  //border-color: #cccccc;
  border: none;
  outline: 1px solid #ccc;
  background-color: #e4ebf1;
  color: #000;
}

要修复更高分辨率的宽度，您可以将min-width 属性添加到.ui-selectmenu-category

.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
}

【讨论】：

那不行。添加您所说的内容导致价格列在悬停时移动到底部。但这不是我们想要的。悬停时，每行元素的位置应该是固定的。
也许你只需要让宽度大一点。它对我有用吗？我添加了一张它为我工作的图片。我正在使用 Chrome。
是否可以删除出现在每列末尾的垂直线段。例如：在 L 和标准螺丝调整和 0.00 美元之间。我只需要水平轮廓/边框而不是垂直轮廓。该怎么做？
所以问题是你使用的分辨率比我高。
我将min-width: 290px; 添加到.ui-selectmenu-category，这似乎解决了问题。