Jquery 使用CSS的流体宽度菜单

我有一个水平CSS菜单。问题是，当用户创建5个以上的菜单项时，li选项卡会移动到新行。我不想发生这种事

如果用户只创建了3个菜单项，那么每个选项卡的宽度都会增加，以适应整个宽度，那么如何使其保持流畅的宽度呢

HTML:

<div class="container">
 <div id="new-menu-lower">
  <ul class="menuul">
   <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Test</a>
   </li>

  </ul>
 </div>
</div>

div.container
{
    clear: both;
    margin: 10px auto 0;
    width:960px;
    border:1px solid red;
    height:700px;
}

div#new-menu-lower {
    border-radius: 3px 3px 3px 3px;
    border-top: 0 solid lightgrey;
    margin: 0 8px 10px;
}

#new-menu-lower ul {
    border: 1px solid white;
    display: block;
    height: 27px;
}

#new-menu-lower ul li:first-child {
    border-left: 0 solid lightgrey !important;
    border-radius: 7px 0 0 7px;
}

#new-menu-lower ul li {
    background-image: url("http://i45.tinypic.com/16if95z.png");
    background-repeat: repeat;
    border-right: 0 solid lightgrey !important;
    float: left;
    height: 27px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    width: 168px;
}

jsidle示例：

像这样吗

var mw = $('.menuul').width();
var ll = $('.menuli').length;
var c = mw / ll;
$('.menuli').css('width', c)

$ulWidth = $('.menuul').width();
$listLength = $('.menuli').length;
$('.menuli').css('width', $ulWidth / $listLength )

---

您可以使用一点JQuery来实现这一点

此外，请在此处查找代码：-

$(document).ready(function(){
   var liCount = $('li.menuli').length;
   var parentUlWidth = $('li.menuli').parent('ul').width(); 
   var liWidth =  Math.floor(parentUlWidth * (1/liCount)) - 10;
    $('#new-menu-lower ul li').css({
        'width':liWidth
    });    
});​

编辑：

我已经更新了小提琴，请现在检查小提琴链接。我改变了脚本和css

CSS:

我创建了一个（我认为）有效的示例：

这取决于列表元素中有多少文本。它不适用于X元素。你不能用这个去无限的X

---

编辑：看来，

未定义

发布的解决方案适用于您想要的任意多个元素…实时演示

$ulWidth = $('.menuul').width();
$listLength = $('.menuli').length;
$('.menuli').css('width', $ulWidth / $listLength )

现在，您可以在css中使用

display:table cell

属性，如下所示

并根据布局更新css和颜色

div.container
{
    margin: 10px auto 0;
    width:960px;
    border:1px solid red;
    height:700px;
    background:red;
}

div#new-menu-lower {
    border-radius: 3px 3px 3px 3px;
    border-top: 0 solid lightgrey;
    margin: 0 8px 10px;
    background:green;
}

#new-menu-lower ul {
    border: 10px solid yellow;
}

#new-menu-lower ul li:first-child {
    border-left: 0 solid lightgrey !important;
    border-radius: 7px 0 0 7px;
}

#new-menu-lower ul li{
display:table-cell;
    padding-left: 10px;
    padding-right: 10px;
}
#new-menu-lower ul li a{
    background: url("http://i45.tinypic.com/16if95z.png");

    border-right: 0 solid lightgrey !important;
    height: 27px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    display:block;
    width: 168px;
}

---

现场演示

$ulWidth = $('.menuul').width();
$listLength = $('.menuli').length;
$('.menuli').css('width', $ulWidth / $listLength )

---

---

更新的演示

使用以下Jquery可以实现您的目标

JQUERY

$ulWidth = $('.menuul').width();
$listLength = $('.menuli').length;
$('.menuli').css('width', $ulWidth / $listLength )

---

查看此演示：

您不会嘲笑javascript

只需在CSS中更改以下行：

#new-menu-lower ul {

/*display: block; //////////////////REMOVE//////////////////// */
display:table; /*  //////////////////ADD//////////////////// */

以及：

---

我来自未来，为了未来的观众：）

您可以使用显示器：flex；对于ul和flex:1；对于菜单项，我认为对于最近的浏览器来说，这是一个非常好的解决方案

ul{display: flex;}
li{flex: 1;} /* modify witdh of item */

---

看到这个了吗：你想这样做吗？不，如果有3个列表项，那么它需要适合整个宽度。如果菜单标题中的内容太多，则需要减小其他列表的大小以适应全宽。如果有4个，则应为全宽。如果在最后2个li中输入10个字符的标题，则不会调整其他li的大小以显示文本：（顺便说一句，这根本不起作用，如果您查看更新的演示，测试项目会经过红色容器。