html - 使 li 完全覆盖 ul 而无需 li 的固定宽度

Question

我有一个水平菜单导航。

代码是:

<div class="menu-holder">
    <ul class="menu"> 
        <li>
            <a href="#">Home</a> 
        </li>
        <li>
            <a href="#">Profile</a> 
        </li>
        <li>
            <a href="#">Billing</a> 
            <ul class="submenu"> 
                <li><a href="#">New</a></li> 
                <li><a href="#">Find</a></li>                         
            </ul>
        </li>
        <li>
            <a href="#">Workspaces</a> 
        </li>
        <li>
            <a href="#">Manage Leaves</a> 
        </li>
        <li>
            <a href="#">Blogs</a> 
        </li>
        <li>
            <a href="#">News</a> 
        </li>
        <li>
            <a href="#">Search</a> 
        </li>              
        <li>
            <a href="#">Albums</a> 
        </li> 
    </ul>         
</div>

CSS:

ul.menu {
    list-style: none;
    padding: 0 20px;    
    margin: 0;
    float: left;
    width: 960px;
    background: #222;
    font-size: 1.2em;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 10px;    
    behavior: url(CSS3PIE);
}
ul.menu li {
    float: left;
    margin: 0;  
    padding: 0 15px 0 0;
    position: relative; 
}
ul.menu li a{
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.menu li a:hover{
    background: url(Images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span { 
    width: 17px;
    height: 35px;
    float: left;
    background: url(Images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {background-position: center bottom; cursor: pointer;} 
ul.menu li ul.submenu {
    list-style: none;
    position: absolute; 
    left: 0; top: 44px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    border-radius: 5px; 
    -webkit-border-radius: 5px;
    border: 1px solid #111;
    behavior: url(CSS3PIE);
}
ul.menu li ul.submenu li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; 
    border-bottom: 1px solid #444; 
    clear: both;
    width: 170px;
}
html ul.menu li ul.submenu li a {
    float: left;
    width: 145px;
    background: #333 url(Images/dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.menu li ul.submenu li a:hover { 
    background: #222 url(Images/dropdown_linkbg.gif) no-repeat 10px center; 
}

还使用了 jQuery 来创建此导航。

现在我想让li完全覆盖ui。但是没有对 li 应用固定宽度。因为还有另一个菜单项(未显示在图片中)将根据登录用户的 Angular 色显示。

这可能吗？

---

Answer 1

我认为解决这个问题的最佳方法是使用 display: table/table-cell 而不是 float: left。这是一个 fiddle :http://jsfiddle.net/nk7yY/

基本上，您要在代码中更改的是:

ul.menu {
    display: table;
    width: 100%; /* Tables are not 100% width like block elements */
    /* Everything you already had except float: left; which I don't really get why you have to begin with */
}

ul.menu li {
    display: table-cell;
    /* Everything you already had except float: left; */
}

ul.menu li a {
    /* Just remove the float here as well */
}

编辑:尽管这在旧 IE 中不起作用，但您可以为它们保留 float (例如使用 *float hack)。