HTML5Boilerplate的Clearfix类没有放在包含元素上
HTML5Boilerplate的Clearfix类没有放在包含元素上
提问于 2014-01-15 18:48:18
stinsonandassociates.com网站在其移动导航菜单上使用了一个清晰的选项(在小屏幕宽度上可以看到)。它不起作用，但我很好奇为什么我正在应用的clearfix类(使用HTML5Boilerplate)至少没有识别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> 回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-15 19:52:28
我复制了您的代码，在我看来，结束括号解决了您的问题：
最重要的是，列表项都在<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 */这能解决你的问题吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21145776
复制相关文章
相似问题
腾讯云开发者
