为什么我的CSS菜单有时会格式错误？

我目前正在一个网站上工作，但主菜单有点问题。为什么我的CSS菜单有时会格式错误？

有时候，10次中可能有1次，菜单没有加载它应该的方式。

看看下面的图片吧！

这是菜单应该如何看起来像： enter image description here

...这是菜单如何实际样子有时： enter image description here

ul.menu { 
    font-size: 1.21em; 
    color: #333333; 
    padding: 0; 
    margin: 0; 
    padding-top: 29px; 
    height: 100%; 
    font-weight: 600; 
    width: auto; 
    float: right; 
} 
li.menu { 
    list-style-type: none; 
    padding-left: 26px; 
    text-decoration: none; 
    width: auto; 
    float: left; 
} 
li:hover.menu { 
    text-decoration: underline; 
}

HTML

<ul class="menu"> 
    <li class="menu"><a href="page_1.html" class="menu">PAGE 1</a></li> 
    <li class="menu"><a href="page_2.html" class="menu">PAGE 2</a></li> 
    <li class="menu"><a href="page_3.html" class="menu">PAGE 3</a></li> 
</ul>

来源

2014-04-03 user3493886

你的风格永远不会影响你的标记。在CSS中的类是.menu，并在您的标记其top_menu。如果这只是显示代码的失败;问题可能是ul.menu正确的;与没有给予witdth。所以你应该在那里设置一个最小宽度。 – caramba

是否真的需要在ul，li和a上添加相同的类名，而不是在li上添加类，并且可以通过ul.menu li {}，ul.menu li {}来在css中访问它，这更加健壮，有用 –

'li：悬停。菜单{text-decoration：underline;}'是无用的代码，因为这是悬停时无论如何都是链接的默认行为。它应该被删除。 – TylerH

您的HTML代码中的类是'top_menu'，但它是CSS中的'菜单'。此外，您还应该加入：

display:inline-block; 
vertical-align:top;

的菜单类，（因为李不在线默认）

，并删除

float:left;

来源

2014-04-03 13:25:29 Gwenc37

菜单元素是浮动的（li菜单是左浮动的），显示行内块不会做任何事情 – Huangism

是的，事实上。我可以确切地说。我将核心我的回答 – Gwenc37

你期望'vertical-align：top;'实现什么？因为在这里没有任何成就。 – TylerH

你的问题有点含糊。你想让你的菜单一直漂浮在页面的右侧吗？这就是您当前的float:right/left;属性最终实现的目标。

如果你不希望出现这种情况，和/或如果你想在你的菜单项的造型更精确的控制，你应该与display: inline;或display:inline-block;（更换float: right;和float: left;都将完成内嵌样式您正在寻找，但后者将在顶部和其他地方有更多的填充）。

另一个问题是您的li:hover.menu选择器代码现在完全是多余的; text-decoration: underline;是已悬停的链接的默认行为。为了达到你想要的效果，你的链接上有text-decoration: none;，直到你将它们悬停在它们上面，你需要改进你的选择器。现在，您的text-decoration: none;属性应用于li元素，但不适用于其子元素（a元素）。我已经在下面的CSS中解决了这个问题。

我的CSS：

ul.menu { 
    font-size: 1.21em; 
    color: #333333; 
    padding: 0; 
    margin: 0; 
    padding-top: 29px; 
    height: 100%; 
    font-weight: 600; 
    width: auto; 
    display: inline-block; 
} 
li.menu { 
    list-style-type: none; 
    padding-left: 26px; 
    text-decoration: none; 
    display: inline-block; 
} 

li.menu>a { 
    text-decoration: none; 
    color: #333333; 
} 

li:hover.menu { 
    text-decoration: underline; 
}

JSFiddle

不管，除非你设定一个固定的宽度为您的菜单DIV，你的链接总是会落在线垂直当视口不宽足以容纳他们全部在线。

来源

2014-04-03 13:45:59 TylerH

为什么我的CSS菜单有时会格式错误？

回答

相关问题