clearfix - 在包含元素上,不放置HTML5Boilerplate的Clearfix类

  显示原文与译文双语对照的内容

网站 stinsonandassociates.com 在它的移动导航菜单( 在小屏幕宽度下看到) 上使用 clearfix 。 它不起作用,但是我想知道为什么应用( 使用 HTML5Boilerplate )的clearfix类至少不能识别clearfix属性。 桌面导航菜单使用相同的类并且它工作。

这是HTML代码:


<header>
<h1>Bob Stinson</h1>
<a href="/" title="Home Page">
 <img src="img/bobstinson_signature_v2.png" 
 alt="Bob Stinson signature" width="211" height="170"/></a>
</header> 
<nav id="topNav">
 <h2>Top Navigation</h2>
 <ul class="desktop clearfix">
 <li><a href="/" title="Home Page" class="current">Home</a></li>
 <li><a href="psychology" title="Psychology" 
 id="psychologyButton">Psychology</a></li>
 <li><a href="law" title="Law" id="lawButton">Law</a></li>
 <li><a href="about" title="About">About Us</a></li>
 </ul>
</nav> 
<nav class="mobile clearfix"> 
 <ul>
 <li><a href="" title="Home Page">Home</a></li>
 <li><a href="psychology" title="PsychologyPage">Psychology</a></li>
 <li><a href="law" title="Law Page">Law</a></li>
 <li><a href="about" title="Law Page">About Us</a></li>
 <li><a href="contact" title="Law Page">Contact</a></li>
 <li><a href="legal" title="Law Page">Legal</a></li>
 </ul>
</nav> 

时间: 作者:

我复制了你的代码,并且似乎右括号修正了你的问题:

List items contained in nav

上面 所有列表项都是 inside <nav class="mobile clearfix">.. . </nav>


@media only screen and (min-width: 481px) {
/* Style adjustments for viewports that meet the condition */

/* Page Layout */
. . ..
/* About Us */
. about h2 {
 text-align: left;
 }
}/* <--- i added this bracket */

这是否解决了你的问题?

...