【发布时间】：2012-11-20 19:05:31
【问题描述】：
问题：
如何让NAV 之后的内容不浮动？
前言：
我正在组合一个可重复使用的 progress-tracker 模块，以插入到一些正在构建的工具中，以便在我们的防火墙内供内部使用。
虽然跨浏览器兼容性很好，但我们只需要针对 Chrome 和 FireFox 编写代码。这些是我们技术团队正式支持的唯一浏览器。
此外，我们随时欢迎任何和所有改进建议。
挑战：漂浮！！
为了使箭头正确显示并直观地表现，我必须右浮动li's。
（我的意思是“有”，我的意思是“想不出更好的方法” :)
为了防止整个nav 向右浮动，我不得不向左浮动它。
现在，导航之后出现的任何内容都与它一致。
注意：
您还可以查看和使用代码here on jsFiddle。
代码：
HTML：
<nav id="progress_tracker">
<ul>
<li><a href='#'>Grab a beer</a></li>
<li><a href='#'>Work a little more</a></li>
<li><a href='#' class="current">Take a Nap</a></li>
<li><a href='#' class="complete">Work like a dog</a></li>
<li><a href='#' class="complete">Grab a coffee</a></li>
</ul>
</nav>
CSS：
nav {
float: left;
}
nav#progress_tracker {
padding: 0.25em;
background-color: #1a3340;
border-radius: 1.75em;
}
nav ul li:last-child{ /* Remember. We are floating right, so last is furthest left */
margin-left: -1.7em;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline-block;
float: right;
position: relative;
padding: 0;
margin: 0;
}
nav ul li a{
display: inline-block;
vertical-align: middle;
color: #777;
background-color: DDD;
padding-top: 0.75em; /* top/btm padding need to be half of line-height */
padding-bottom: 0.75em; /* top/btm padding need to be half of line-height */
padding-left: 2em; /* left padding */
padding-right: 1em; /* right padding is (left-padding - depth-of-arrow (see below) */
line-height: 1.5em; /* line-height needs to be double top/btm padding */
}
nav ul li a:after{
width: 0;
height: 0;
position: absolute;
top: 0;
right: -1em; /* depth of offset (equal to depth of arrow) */
border-left: 1em solid #d9d9d9; /* depth of arrow (equal to depth of offset) */
border-top: 1.5em inset transparent; /* border thickness needs to match line-height */
border-bottom: 1.5em inset transparent; /* border thickness needs to match line-height */
content: ""; /* required to make all of this work */
}
nav ul li a:visited{
color: #888888;
}
nav ul li a.current{
font-weight: bold;
color: #777;
background-color: #FFBB00;
}
nav ul li a.current:after{
border-left: 1em solid #FFBF00; /* depth of arrow (equal to depth of offset) */
}
nav ul li a.complete{
color: #666;
background-color: #FFFFEE;
}
nav ul li a.complete:after{
border-left: 1em solid #FFFFEF; /* depth of arrow (equal to depth of offset) */
}
nav ul li:last-child a{ /* Remember. We are floating right, so last is furthest left */
border-top-left-radius: 1.45em;
border-bottom-left-radius: 1.45em;
}
nav ul li:first-child a{ /* Remember. We are floating right, so first is furthest rt */
border-top-right-radius: 1.45em;
border-bottom-right-radius: 1.45em;
}
nav ul li:first-child a:after{
border: none;
}
谢谢大家。
【问题讨论】：
-
Ahaaa 令人耳目一新的帖子，感觉就像阅读科学期刊，实验 - 结论等......顺便说一句，答案很简单，只需清除你的花车：p
clear: both;tadaa..100/100为我..vuhooo -
感谢 .. 的赞美和建议。我确实尝试了
clear: both;，但没有得到预期的结果，因为我不确定我应该在哪里确切地进行清理:) ...如果您有任何建议我可以添加我的工具箱，我会很高兴听到他们的声音。再次感谢。