CSS 导航 : two submenus side by side

Question

很难解释...请看:

https://codepen.io/bigfraggle/pen/XBpEYY

希望导航 2 中的两列没有任何边距并排。我试过两者都 float ，但这不起作用。

style="left: 84px;"

对于右列不是一个好的解决方案。

Answer 1

float: left; 和 position: absolute; 不能一起工作。尝试给 block 一个相对位置并添加 float: left; 到两列。

如果您需要绝对定位 block ，请将它们放在周围的 div 中。给这个 div position: absolute; 和定位所需的其他样式。这样您就可以保持列的相关性。

基于你的新 fiddle here , 要将子菜单中的两列并排放置，请按照下列步骤操作:

从新的 div 中删除 width: 200%;:

<div style="position: absolute; background: yellow;">

从列中删除 float: left;:

#navi li ul {
    display: none;
    position: relative;
    /*float: left;*/
    left: -1px;
    padding: 0;
    background: #222B38;
    border: 1px;
    border-style: solid;
    border-color: #FFFFFF; 
}

将 display: table-cell; 添加到列中:

#navi li:hover ul,
#navi a:hover ul {
    display: table-cell; 
}

float: left; 将始终尝试 将元素彼此相邻放置，但在没有足够空间的情况下将它们相互放置也没有问题。当您不知道包装器的宽度时，这会产生问题。 display: table-cell 但是在这些情况下会起作用。