Question

问题：
我怎样才能得到NAV后不浮动的东西？

前言
我正在整理一个可重复使用的进度跟踪器模块，以便插入一些内部用于防火墙内部工具的工具。
虽然跨浏览器兼容性很好，但我们只有需要才能对Chrome和FireFox进行编码。这些是我们的技术团队正式支持的唯一浏览器此外，欢迎任何和所有改进建议。

挑战： FLOATS !!
为了使箭头正确显示并且行为直观，我必须正确浮动li。
（通过“had”，我的意思是“想不出更好的方式”：）

为了防止整个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;
}

由于-A-一堆。

Answer 1

看起来有点笨拙，但没有添加标记，你可以在p元素上设置css样式：

p {
    clear:both;
}

http://jsfiddle.net/G6J6P/2/

如果你对标记没问题，我会这样做：

<br style="clear:both;" />

导航后

。

Answer 2

应用css样式

clear: both;

到下一个元素。这样可以防止在浮动的nav旁边嵌套自己。

Answer 3

我知道你说你想保持标记相同，但你在使用display:inline-block;并在li元素之间留有空格时遇到了问题。这是一个没有float混乱的工作版本（example）。它有:before和:after，每个都作为前面箭头的一半。我添加了:hover样式，以便您可以测试悬停并查看如何自行设置样式。

注意：包裹后看起来不那么漂亮。

HTML

<nav id="progress_tracker">
    <ul>
        <li><a href='#' class="complete">Grab a coffee</a></li><!--
        --><li><a href='#'>Work like a dog</a></li><!--
        --><li><a href='#' class="complete">Take a Nap</a></li><!--
        --><li><a href='#' class="current">Work a little more</a></li><!--
        --><li><a href='#'>Grab a beer</a></li>
    </ul>
</nav>
<p>Some random text</p>

新CSS

a:hover,
a:hover:before,
a:hover:after {
    background:lime !important;
}
nav#progress_tracker {
    display:inline-block;
    padding: 0.25em;
    background-color: #1a3340;
    border-radius: 1.75em;
    overflow:hidden;
}
nav ul{
    list-style-type: none;
}
nav ul li{
    display: inline-block;
    position: relative;
    padding: 0;
    margin: 0;
}
nav ul li a{
    display: inline-block;
    vertical-align: middle;
    color: #777;
    background: #1A3340;
    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: 1em;                      /* left padding */
    padding-right: 1.5em;                   /* right padding is (left-padding + 1/2 depth-of-arrow (see below) */
    line-height: 1.5em;                     /* line-height needs to be double top/btm padding */
}
nav ul li a:before,
nav ul li a:after {
    width: 1em;
    height: 1.5em;
    position: absolute;
    left: 0;
    content: "";                            /* required to make all of this work */
    background: #1A3340;
}
nav ul li a:before{
    top: 0;
    -webkit-transform: skewX(33deg) translate(-50%);
    -moz-transform: skewX(33deg) translate(-50%);
    transform: skewX(33deg) translate(-50%);
}
nav ul li a:after{
    bottom: 0;
    -webkit-transform: skewX(-33deg) translate(-50%);
    -moz-transform: skewX(-33deg) translate(-50%);
    transform: skewX(-33deg) translate(-50%);
}
nav ul li a:visited{
    color: #888888;
}

/* .current styles */
nav ul li a.current{
    font-weight: bold;
    color: #777;
    background-color: #FFBB00;
}
nav ul li a.current:before,
nav ul li a.current:after{
    background: #FFBF00;
}

/* .complete styles */
nav ul li a.complete{
    color: #666;
    background-color: #FFFFEE;
}
nav ul li a.complete:before,
nav ul li a.complete:after{
    background: #FFFFEF;
}

/* First/last fixes */
nav ul li:first-child a {
    border-top-left-radius: 1.45em;
    border-bottom-left-radius: 1.45em;
}
nav ul li:last-child a {
    border-top-right-radius: 1.45em;
    border-bottom-right-radius: 1.45em;
}
nav ul li:first-child a:before,
nav ul li:first-child a:after{
    background: none !important;
}

如何停止FLOAT（没有额外的标记）？

3 个答案:

HTML

新CSS