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

Question

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

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

这是菜单的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;
}

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

不正确...

正确...

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

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

Answer 1

我认为你有 display: block 属性，可能来自某些父元素。尝试像这样修复它:

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

如果这对您有帮助，则说明您遇到了此显示的简单问题:阻止属性。