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

问题描述

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

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

当我使用以下代码时，每个嵌套的li仅与文本+边距一样宽。

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

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

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

例如：

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

推荐答案

要使所有列表项的长度与最长的长度相同，则需要手动设置宽度。据我所知，没有纯CSS方法可以自动实现。

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

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