绝对位置将列表元素分成新行

Posted 2023-03-06

【中文标题】绝对位置将列表元素分成新行

【英文标题】：Absolute position breaks the list elements into new line

【发布时间】：2016-02-03 02:34:21

【问题描述】：

我正在尝试在 wordpress 中自定义导航菜单。我希望我的子菜单出现在父菜单元素下方的一行中。我还将子菜单位置设置为绝对，以便我可以控制主菜单栏和子菜单栏的重叠。

下面是我最小化的 CSS（在 SASS 中，为了清楚起见，我只发布我认为相关的那些部分）。

问题：一切正常，除了子菜单项现在分成几行，而不是单行。

观察：如果我删除绝对定位或者我给出一个固定的宽度，那么它就可以工作。

我尝试过：放置空格：nowrap 和 display:inline-block (in li)，虽然我知道显示对于绝对定位没有意义。

.menu-primary-menu-container 
    &>ul 
        float:left;
        list-style: none;
        &>li 
            position: relative;
            float:left;
            &>ul 
                position: absolute;
                height: 40px;
                bottom: -30px;
                list-style: none;

                &>li 
                    float:left;
                
            
        
    

【参考方案1】：

您必须指定子菜单的宽度才能使其正常工作：JSFiddle

.menu-primary-menu-container 
    &>ul 
        float:left;
        list-style: none;
        &>li 
            position: relative;
            float:left;
            &>ul 
                position: absolute;
                height: 40px;
                bottom: -30px;
                list-style: none;
                width: 500px;

                &>li 
                    float:left;
                
            
        
    

如果您使用position: absolute; 没有宽度或没有指定left 和 right，元素将使用尽可能小的宽度。

【讨论】：

很有趣......它确实尝试使用尽可能小的宽度......但我不想固定菜单的宽度（因为它取决于项目的数量）......有没有任何其他方式（left:0 不起作用）

正如我已经说过的：如果你使用left，你还需要设置right。