使用CSS流体宽度菜单(Fluid width menu using CSS)

我有一个水平CSS菜单。当用户创建超过5个菜单项的李标签移动到一个新行的问题。我不希望这种情况发生。

我怎样才能使它流体宽度，这样如果用户在宽度创建仅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>

CSS：

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;
}

实例的jsfiddle： http://jsfiddle.net/rM9MW/

Answer 1:

你不jeed的JavaScript！

演示jsBin

只要改变你的CSS此行：

#new-menu-lower ul {

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

和：

#new-menu-lower ul li {

/* float: left;      //////////////////REMOVE//////////////////// */
display:table-cell; /* //////////////////ADD//////////////////// */

Answer 2:

像这样？

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

http://jsfiddle.net/rM9MW/8/

Answer 3:

您可以使用jQuery的位来实现这一点，这里是的jsfiddle

也请在这里找到的代码： -

$(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：

#new-menu-lower ul li {
    padding-left: 5px;
    padding-right: 5px;
}

Answer 4:

现场演示 http://jsfiddle.net/rM9MW/29/

嘿，现在你可以使用display:table-cell在你的CSS属性，这样

并根据您的布局更新您的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;
}

现场演示 http://jsfiddle.net/rM9MW/29/

更新演示http://jsfiddle.net/rM9MW/39/

Answer 5:

使用下面的Jquery，你可以实现你的目标;

JQUERY

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

看到这个演示： http://jsfiddle.net/rathoreahsan/nxurR/

Answer 6:

我创建了一个例子（我认为）工作原理：

http://jsfiddle.net/ybmGr/2/

这取决于有多少文字是列表元素的内部。它不会对X元素工作。你就不能去无限X与此有关。

编辑： 那么看来， undefined发布，对于你想要的元素的作品的解决方案......

Answer 7:

我来自未来，对未来的观众:)

您可以使用显示：弯曲; 用于UL，和柔性：1; 菜单项，我认为这是最新的浏览器很好的解决。

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

文章来源: Fluid width menu using CSS