Question

我有一个水平菜单导航。

enter image description here

代码是：

<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用于创建此导航。

现在我想让李完全覆盖ui。但是没有对li应用固定宽度。因为还有另一个菜单项（不在图片中），根据登录用户的角色可见。

有可能吗？

enter image description here

Answer 1

我认为解决此问题的最佳方法是使用display: table/table-cell代替float: left。这是一个小提琴：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黑客）。

Answer 2

你是说你有9个ul.menu li元素，有时会有10个？并且你希望所有9（或10）一起填充ul.menu的宽度？

或者你在谈论ul.submenu？

只是说“让李完全覆盖ui”也听起来像你想要一个＆lt; li＆gt;覆盖导航ui的整个宽度（假设你的＆lt; ul＆gt;而不是UI的其他部分。

这是你想要做的吗？或者你只想要所有9或10＆lt; li＆gt;填充＆lt; ul＆gt;空格的项目？

如果是这样的话，你应该把课程放在＆lt; ul class =“menu”＆gt;它会根据登录用户的角色而变化，以便您可以相应地调整样式。

提供更多信息，说明您尝试做什么以及您希望支持哪些浏览器，即CSS3。

使li完全覆盖ul而没有固定宽度的li

2 个答案: