优化（几乎最小化）jqueryui菜单的宽度

Question

我有一个Jqueryui menu，它是在运行时生成的AJAX。它的生成的 HTML是

 <ul id='menu_id'>
   <li>-</li>
   <li>the_system</li>
   <li>the_agenda</li>
 </ul>

第一个<li>-</li>是一个行分隔符。其他列表项包含单个单词（类似C的标识符），例如<li>this_little_thing</li> ....字体不是等宽字体。菜单最终应该用于自动完成目的＆＃34; inside＆＃34; （实际上＆＃34; over＆＃34;）一些<textarea>。

当然，Javascript正在做类似

的事情

var mymenu=$("#menu_id");
mymenu.menu({
        select: function(ev,ui) {
           console.log("menu selected ev=", ev, " ui=", ui);
        }
});

但我不知道如何计算该菜单的近乎最小的宽度。目前，该菜单跨越其容器的整个宽度，因此几乎与网页一样宽。我尝试过几件事，比如：

    var minwidth = 40;
    /// dont work, the el has same width as body
    mymenu.children("li").each(function(ix,el) {
        console.log("ix=", ix, " el=", el, " .firstChild=", el.firstChild);
        var elw = el.firstChild.clientWidth;
        console.log("ix=", ix, " elw=", elw);
        if (minwidth<elw)
           minwidth=elw;
    });

血腥细节

与我的previous问题相同的上下文：Firefox 38或42，Jquery 2.2.0，Jquery-Ui 1.11.4，Linux / Debian / Sid / x86-64，我的免费软件GPL alpha阶段{{ 3}};如果重要的话，我正在谈论提交MELT monitor。如果你足够勇敢地构建并测试它，那么运行

  ./monimelt -Drun,web -W localhost.localdomain:8086/ -J 3

然后浏览e89f3f807ec..并输入<textarea>权利命令：三个字母the，然后同时按 Ctrl Space ;应该出现一个完成菜单，但它太宽了！

http://localhost.localdomain:8086/nanoedit.html

^{（在图片中，菜单为灰色，位于靠近底部的send command按钮上方;在我的中，它位于第215行后的函数mom_cmdkeypress中; menu_id HTML5 ID实际上是commandcompletemenu_id，我的Javascript变量是menuel而不是mymenu）}

Simplified Jsfiddle（MVCE）

此webroot/nanoedit.js file jsfiddle显示与HTML

相同的问题

 <h2> my menu </h2>
 <div id='mymenudiv_id'>
  <ul id='menu_id'>
    <li>-</li>
    <li>the_system</li>
    <li>the_agenda</li>
  </ul>
 </div>
 <h2  id='width_id'>-</h2>

和javascript：

var mymenu;
$(document).ready(function() {
   mymenu = $("#menu_id");
   var mywidth = 40;
   mymenu.children("li").each(function(ix, el) {
     console.log("menu-children ix=", ix, " el=", el);
     var elw = $(el).width();
     console.log("menu-children ix=",ix, " elw=", elw);
     if (mywidth<elw)
        mywidth = elw;
   });
   $("#width_id").html("mywidth="+mywidth.toFixed(0));
   mymenu.menu({
        select: function(ev, ui) {
          console.log("menu-select ev=", ev, " ui=", ui);
   }
 })
})

和标准https://jsfiddle.net/bstarynk/2k464q18/ CSS;在我的浏览器上显示mywidth=523这显然是错误的。 另外，用var elw = $(el).width();替换JsFiddle中的var elw = el.clientWidth;并不会改变任何内容。

更简单的问题

也许我只是想知道什么是CSS3设置，<ul>元素具有垂直对齐的小<li>元素和最小宽度，以适应最宽{{1}但我无法理解......所以我问https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css问题。