4

问题：
我如何获得NAV不浮动之后的结果？

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

挑战：漂浮！！
为了使箭头正确显示并直观地表现，我必须正确浮动li's.
（通过“有”，我的意思是“想不出更好的方法” :)

为了防止整体nav向右浮动，我不得不让那个浮动。
现在，导航之后出现的任何内容都与它一致。

注意：
您还可以在 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;
}

非常感谢。

4

3 回答 3

2

看起来有点笨拙，但不添加标记，您可以在 p 元素上设置 css 样式，如下所示：

p {
    clear:both;
}

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

如果你对标记没意见，我会这样做：

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

在你的导航之后。

于 2012-11-20T19:08:42.543 回答
1

应用 css 样式

clear: both;

到下一个元素。这将防止它在你的 float 旁边依偎nav。

于 2012-11-20T19:08:30.130 回答
0

我知道你说过你想保持标记不变，但是你在元素display:inline-block;之间使用和留有空间时遇到了问题。li这是一个没有float混乱的工作版本（示例）。它有: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;
}
于 2012-11-20T19:32:19.777 回答