将所有嵌套的li设置为最宽li的宽度 [英] set all nested li's to be width of widest li

问题描述

如何使嵌套的li的宽度相同？

当我使用下面的代码时，每个嵌套的li只有它的文本+ margin。 >

我希望所有的li都与父ul下最宽的li一样宽。

例如：

 < ul id =menu> 
< li< a href =＃title =菜单a>菜单a< / a>< / li& 
< li< a href =＃title =菜单b>菜单b< / a>< / li& 
< li< a href =＃title =嵌套菜单>嵌套菜单< / a> 
< ul> 
< li< a href =＃title =菜单项>菜单项< / li> 
< li< a href =＃title =长菜单项>长菜单项< / a>< / li& 
< li< a href =＃title =较长菜单项>较长菜单项< / a>< / li& 
< / ul> 
< / li> 
< li< a href =＃title =菜单z>菜单z< / a>< / li> 
< / ul> 
  

与css：

 < style type =text / cssmedia =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％}将使列表项填充其容器的宽度。如果未设置，则它将是用户浏览器窗口的宽度。

How do I make nested li's the same width?

When I use the below code each nested li is only as wide as it's text + margin.

I'd like all of the li's to be as wide as the widest li under the parent ul.

eg:

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

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

解决方案

To make all of the list items the same length as the longest, you will need to manually set the widths. There is no pure CSS method of achieving this automatically as far as I know.

li{width:100%} Will make the list items fill the width of their container. If that is not set, then it will be the width of the user's browser window.

这篇关于将所有嵌套的li设置为最宽li的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！