设置所有嵌套li的宽度最宽li
如何使嵌套li的宽度相同?设置所有嵌套li的宽度最宽li
当我使用下面的代码时,每个嵌套li只与文本+边距一样宽。
我希望所有的li的宽度与父ul的最宽的li一样宽。
如:
<ul id="menu">
<li <a href="#" title="Menu a">Menu a</a></li>
<li <a href="#" title="Menu b">Menu b</a></li>
<li <a href="#" title="Nested Menu">Nested Menu</a>
<ul>
<li <a href="#" title="Menu Item">Menu Item</li>
<li <a href="#" title="Long Menu Item">Long Menu Item</a></li>
<li <a href="#" title="Longer Menu Item">Longer Menu Item</a></li>
</ul>
</li>
<li <a href="#" title="Menu z">Menu z</a></li>
</ul>
与CSS:
<style type="text/css" media="all">
* {
padding:0;
margin:0;
}
body, html {
width: 100%;
height: 100%;
}
#wrapper {
width: 800px;
height: 100%;
margin: auto;
}
#menu {
margin: 0 0 0 8px;
padding: 0;
font-size: 14px;
font-weight: normal;
}
#menu ul {
list-style-type:none;
list-style-position:outside;
position:relative;
z-index:300;
height: 32px;
font-weight:bold;
white-space: nowrap;
padding:0;
}
#menu a {text-decoration:none;
line-height: 32px;
}
#menu a:hover {
}
#menu li {
float:left;
position:relative;
display: inline;
height: 100%;
list-style-type: none;
padding: 0 20px;
background: #ccc;
}
#menu ul {
position:absolute;
display:none;
left:0px;
background: #BDCCD4;
width:100%;
}
#menu ul a, #menu li a {
display: block;
}
#menu li ul {
background: #BDCCD4;
display:block;
}
#menu li ul a {
font-weight: normal;
height:auto;
float:left;
}
#menu ul ul {
padding: 0 9px;
display:block;
}
#menu li ul li {
padding: 0 9px;
background: #BDCCD4;
}
#menu li:hover {
background: #ddd;
height: 32px;
}
#menu li li:hover, #menu li li li:hover {
background: #ddd;
height: 32px;
}
#menu li a:link, #menu li a:visited {
text-decoration: none;
color: #003E7E;
margin: auto;
}
使所有的列表项相同长度的最长,您需要手动设置宽度。就我所知,没有纯粹的CSS方法可以实现这一点。
li {width:100%}将使列表项填充其容器的宽度。如果没有设置,那么它将是用户浏览器窗口的宽度。
简单地增加width: 100%
为#menu li ul li
为我工作。要使其适用于更长的物品,请使用#menu li ul
上的width: auto
。编辑2:添加填充解决方法。
新的CSS:
<style type="text/css" media="all">
* {
padding:0;
margin:0;
}
body, html {
width: 100%;
height: 100%;
}
#wrapper {
width: 800px;
height: 100%;
margin: auto;
}
#menu {
margin: 0 0 0 8px;
padding: 0;
font-size: 14px;
font-weight: normal;
}
#menu ul {
list-style-type:none;
list-style-position:outside;
position:relative;
z-index:300;
height: 32px;
font-weight:bold;
white-space: nowrap;
padding:0;
}
#menu a {text-decoration:none;
line-height: 32px;
}
#menu a:hover {
}
#menu li {
float:left;
position:relative;
display: inline;
height: 100%;
list-style-type: none;
padding: 0 20px;
background: #ccc;
}
#menu ul {
position:absolute;
display:none;
left:0px;
background: #BDCCD4;
width:100%;
}
#menu ul a, #menu li a {
display: block;
}
#menu li ul {
background: #BDCCD4;
display:block;
width: auto;
}
#menu li ul a {
font-weight: normal;
height:auto;
float:left;
}
#menu ul ul {
padding: 0 0 0 9px;
display:block;
}
#menu li ul li {
padding: 0 9px;
background: #BDCCD4;
width: 100%;
}
#menu li:hover {
background: #ddd;
height: 32px;
}
#menu li li:hover, #menu li li li:hover {
background: #ddd;
height: 32px;
}
#menu li a:link, #menu li a:visited {
text-decoration: none;
color: #003E7E;
margin: auto;
}
其结果是在这里:http://jsfiddle.net/y83zm/2/ EDIT 2添加修复来解决一个奇怪的填充问题,看http://jsfiddle.net/y83zm/5/
嘿,谢谢MvanGeest - 与我提供的测试代码一起工作,但与我的真实代码无关。 如果您添加另一个文本为“What about a more longer title”的文本,背景会被切断。 有什么办法可以避免这种情况? 干杯 – nugget 2010-06-15 13:12:56
你可以编辑我提供的jsFiddle,使其出错,点击“更新”并发布新的链接?另外,你的目标是什么浏览器?我无法为IE6提供任何保证。 – MvanGeest 2010-06-15 13:14:23
没关系,自己做了,并编辑了解决方案。这有帮助吗?适用于Firefox。 (哦,如果解决方案的工作,你可以标记它是这样的吗?) – MvanGeest 2010-06-15 13:23:16
您需要使用JavaScript将所有LI
设置为与最宽的LI
相同的宽度。下面的代码,如果你想使用jQuery库:
$(document).ready(function(){
$("#menu > li > ul").each(function() { // Loop through all the menu items that got submenu items
var Widest=0; // We want to find the widest LI... start at zero
var ThisWidth=0; // Initiate the temporary width variable (it will hold the width as an integer)
$($(this).children()).each(function() { // Loop through all the children LIs in order to find the widest
ThisWidth=parseInt($(this).css('width')); // Grab the width of the current LI
if (ThisWidth>Widest) { // Is this LI the widest?
Widest=ThisWidth; // We got a new widest value
}
});
Widest+='px'; // Add the unit
$(this).parent().css('width',Widest);
$(this).children().css('width',Widest);
});
});
CSS变化:
#menu li ul li {
padding: 0 9px;
background: #BDCCD4;
padding: 0 20px;
}
瞧瞧吧JSFiddle。
编辑:修正了我的误解。 :)
非常酷的被接受的答案 - 适用于“#menu li”,而不适用于“#menu li ul li”或仅仅是我? – nugget 2010-06-15 13:52:55
您将获得与最宽子菜单LI相同宽度的父LI。如果这不可取,那么您应该使用纯粹的CSS解决方案。 :) – 2010-06-15 14:48:36
会有一个非常简单的动态解决方案。为了你的CSS,因为你在问题中贴吧,只需添加
#menu ul {
display: inline-block;
min-width: 100px;
}
#menu ul li, #menu ul li a{
width: 100%;
display:block;
}
,然后它会完全按照您希望它是。
你可以看到它的外观在这里:http://jsfiddle.net/ramsesoriginal/y83zm/61/
我用下面的CoffeeScript实现描述的行为:
$ ->
menu_toggle = (e, show) ->
ul = $(e).find('ul')
ul.toggle()
computed = ul.hasClass 'computed_width'
if show && !computed
ul.width 2000 # enormous with to be sure that li’s’ texts are not wrapped
max_width = 0
ul.find('li').each ->
li = $(this)
width = li.width()
max_width = width if width > max_width
ul.width max_width + 30 if max_width # 20 is 2 * padding + some reserve
ul.toggleClass 'computed_width' # no need to compute every time
$('li').has('ul').hover ->
menu_toggle this, true
, ->
menu_toggle this, false
一个简单的jQuery解决方案为我:
$(document).ready(function(){
$('.sub-menu').each(function(){
$(this).width(2000);
var width = 0;
$(this).children('li').each(function(){
if ($(this).children('a').width() > width)
width = $(this).children('a').width();
});
$(this).width(width);
});
});
创建的jsfiddle: http://jsfiddle.net/y83zm/ – MvanGeest 2010-06-15 12:43:51