Question

我想均匀分发此网站的第一级（水平）菜单http://ipa.staging.nextdigital.com 而不影响下拉菜单样式布局。

HTML：

<section class="top-bar-section">
    <ul class="left">
        <li class="active has-dropdown">
            <a class="top-bar-l-1-anchor" href="/about-us">About Us</a>
                <span class="mega-menu-next js-generated">next</span>
                <ul class="dropdown" style="width: 970px;">
                    <li class="title back js-generated">
                     ...
                    </li>
                    <li class="">
                        <a href="/about-us/ipa-office-locations">Office locations</a>
                    </li>
                    <li class="">
                        <a href="/about-us/our-senior-team">Our Senior Team</a>
                    </li>
                </ul>
        </li>
        <li class="has-dropdown">
        <li class="has-dropdown">
        <li class="has-dropdown">
        <li class="has-dropdown">
        <li class="quicklinks has-dropdown">
    </ul>
</section>

我尝试在第一级列表中使用display：table / table-cell方法并且工作得很好但是它延续了第二级列表。

ul.left {
    display:table;
    width:100%;
}

ul.left li.has-dropdown {
    display:table-cell;
    text-align:center;
    float:none;
}
ul.left li.has-dropdown li {
    text-align:left;
}

非常感谢任何css解决方案。

Answer 1

似乎你需要修改每个LI（或A）的大小：

ul.left li {
    width: 150px;
}

以上将影响下一个级别，因此您有两个选项：

（1）使用“＆gt;”改为使用CSS选择器并仅影响直接子节点（检查此CSS选择器的浏览器兼容性）：

ul.left > li {
    width: 150px;
}

（2）重置下一个级别的宽度（在上面的第一个代码之后）：

ul.left li ul li {
    width: auto;
}

如果我遗漏了别的东西，请告诉我。

使用css均匀分配菜单列表项

1 个答案: