菜单布局改变,初始加载时垂直而不是水平

menu layout altering, vertical instead of horizontal on initial load

我已经为这个问题苦苦挣扎了一段时间,主要是因为它只是偶尔发生,而且我也不知道从哪里开始缩小这个问题的原因。所以偶尔,当我的网站页面加载时,应该是水平的菜单栏会垂直加载并一直对齐到 header 的右侧。

正如我之前所说,这种情况偶尔会发生,有时它加载得很好,并且菜单布局通常会在刷新或重新加载页面一次后自行(水平)更正

这是菜单的 css 代码

div.hideSkiplink
{
margin:0px auto 0px 195px; 
position:absolute;
bottom:0;
right:0;


}


div.menu
{
background-color:#080808;


padding: 0px auto 4px auto; 
}

div.menu ul
{
background-color:#080808;
list-style:none;
margin: 0px;
padding: 0px;
width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
background-color: #080808;
/* border: 1px #585B5E solid; */
border-right:1px solid #585B5E;
color: #dde4ec;
display: block;
line-height: 2.15em;

padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}

div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}

div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}

以下是正在发生的事情与它应该是什么样子的图片。

不正确...

正确...

非常感谢任何关于如何弄清楚为什么会发生这种情况的提示。

我还是没弄明白,有人有什么想法吗? 我不知道是否是在此之前加载的某些脚本正在拖拉菜单加载或其他什么。关于如何弄清楚为什么这样做的任何建议都会有所帮助。

我认为您有显示:块 属性,可能来自某些父元素。 尝试像这样修复它:

div.menu > ul li{
 float: left !important;
}

如果这对您有帮助,这意味着您遇到了此显示的简单问题:块 属性。