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

我有一个Jqueryui菜单这是在运行时生成的 AJAX。它是生成的 HTML is

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

首先<li>-</li>是故意的行分隔符。其他列表项都包含单个单词（类似 C 的标识符），例如<li>this_little_thing</li>....字体不是等宽的。菜单最终应该用于自动完成目的“内部”（实际上是“之上”）一些<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 阶段熔体监测仪;我说的是提交e89f3f807ec..如果这很重要的话。如果您有足够的勇气构建并测试它，请运行

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

then browse http://localhost.localdomain:8086/nanoedit.html and type in the <textarea> right to Command: the three letters the, and then press simultaneously Ctrl Space ; a completion menu should appear, but it is way too wide!

^{(in the image the menu is in gray, above the send command button near bottom; in my webroot/nanoedit.js file, it is built in function mom_cmdkeypress after line 215; the menu_id HTML5 id is in fact commandcompletemenu_id and my Javascript variable is menuel not mymenu )}

简化的 Jsfiddle (MVCE)

This https://jsfiddle.net/bstarynk/2k464q18/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://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.cssCSS；在我的浏览器上显示mywidth=523这显然是错误的。 另外，替换var elw = $(el).width();在 JsFiddle 中var elw = el.clientWidth;不要改变任何东西。

更简单的问题

也许我只是想知道 CSS3 设置是什么<ul>垂直对齐的小元素<li>元素和minimal宽度以适合最宽的<li>，但我想不通......所以我问了CSS3 制作一个适合其 li 的薄 ul问题。