使用CSS的流体宽度菜单
我有一个水平的CSS菜单。 问题是当用户创建超过5个菜单项时，li标签移动到新行。 我不希望这种情况发生。
如何使其流动宽度如此，如果用户只创建3个菜单项，则每个标签的宽度增加，以使其适合全宽？
HTML：
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://sofzh.miximages.com/jquery/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/
你不喜欢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//////////////////// */
像这样？
var mw = $('.menuul').width(); var ll = $('.menuli').length; var c = mw / ll; $('.menuli').css('width', c)
您可以使用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; }
现场演示 http://jsfiddle.net/rM9MW/29/
嘿，你现在可以在你的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://sofzh.miximages.com/jquery/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/
使用以下Jquery，您可以实现目标;
JQUERY
$ulWidth = $('.menuul').width(); $listLength = $('.menuli').length; $('.menuli').css('width', $ulWidth / $listLength )
看这个演示： http ： //jsfiddle.net/rathoreahsan/nxurR/
我创建了一个（我认为）有效的例子：
这取决于列表元素中的文本数量。 它不适用于X元素。 你不能用这个去无限X.
编辑 ： 好吧似乎undefined发布了适用于你想要的多个元素的解决方案…
我来自未来，为未来的观众:)
你可以使用display：flex; 对于ul和flex：1; 对于菜单项，我认为对于最近的浏览器来说这是一个非常好的解决方案。
ul{display: flex;} li{flex: 1;} /* modify witdh of item */