0

当我在菜单项上放置一个图标时，它会使 li 变高，但是如果您检查元素，则 li 是元素中唯一变高的东西。

这是可以避免的吗？如果不是，为什么？
示例链接：https ://jsbin.com/kirekufoju/edit?html,output 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
       <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   </head>
   <body>

      <div>
         <ul id="e3ce4756-8352-40ab-b273-e87e253df37d" role="menu" tabindex="0" class="" aria-activedescendant="ui-id-18" >
            <li action="Change Theme" id="menuItem_1467148140" d>
               <nav id="ui-id-17" tabindex="-1" role="menuitem" class=""><span class="ui-icon ui-icon-disk "></span>Change Theme</nav>
            </li>
            <li action="Configure Dashboard" id="menuItem_772280342" >
               <nav id="ui-id-18" tabindex="-1" role="menuitem" class=""><span class=""></span>Configure Dashboard</nav>
            </li>
            <li action="Change Password" id="menuItem_145997753" >
               <nav id="ui-id-19" tabindex="-1" role="menuitem" class=""><span  class="ui-icon ui-icon-disk "></span>Change Password</nav>
            </li>
            <li  action="Help" id="menuItem_351754787" data-uri="">
               <nav id="ui-id-20" tabindex="-1" role="menuitem" class=""><span class=" "></span>Help</nav>
            </li>
            <li action="Logout" id="menuItem_1997186055" >
               <nav id="ui-id-21" tabindex="-1" role="menuitem" class=""><span class=" "></span>Logout</nav>
            </li>
         </ul>
      </div>
   </body>
  <script>
  $(document).ready(function(){

    $(document).ready(function(){
      $('ul').menu({

      })

    });
  });
  </script>
</html>
4

2 回答 2

2

list-style-image从你的li应该做的伎俩中删除：

.ui-menu .ui-menu-item {
  list-style-image: none;
}

https://jsbin.com/mimeqebute/1/edit?html，输出

于 2017-09-29T16:04:32.910 回答
0

最后找到了一张公开的票。我一直在寻找，但一定错过了。来自：https ://bugs.jqueryui.com/ticket/15214#no2

添加以下内容：

.ui-menu li.ui-menu-item{
    display:inherit;
}

样式表应该使它正常运行。显然，这只发生在 webkit 浏览器和其他可能的浏览器上。

于 2017-09-29T16:05:16.023 回答