html - float ::与 block 级兄弟交互后

Question

我有一个我不太明白的互动。我正在构建一个进度条(说真的，我们可以整个 standard 实现了吗？)显示基于 data-* 属性的信息，所以我使用 :before 和 :after显示标签。

我已经掌握了它:http://jsfiddle.net/WtrfL/

HTML:

<div class="wrap">
    <div class="inner">
    </div>
</div>

样式:

.wrap {
    width:500px;
    height:2em;
    border:1px solid black;
}

.wrap:before {
    content:"1";
    float:left;
    border:1px solid black;
}

.wrap:after {
    content:"2";
    float:right;
    border:1px solid black;
}

.inner {
    width:30%;
    height:100%;
    background-color:#DDD;
    border:1px solid #888;
}

不幸的是，我遇到了这种情况:

我希望 [2] 位于主栏的内部，而不是其下方。

我在 Windows 上的 IE9 和 Chrome 27 中看到了相同的行为，所以我很确定这是我误解了这些东西应该工作的方式，而不是渲染引擎中的错误。

那么……怎么了？有任何想法吗？我擅长 hack，这只是目前的原型(prototype)。

Answer 1

我从不在伪元素上使用 float 。我会将它们定位为绝对的。像这样:

.wrap {
    width:500px;
    height:2em;
    border:1px solid black;
    position: relative;
}

.wrap:before {
    content:"1";
    position: absolute;
    left: 0;
    top: 0;
    border:1px solid black;
}

.wrap:after {
    content:"2";
    position: absolute;
    right: 0;
    top: 0;
    border:1px solid black;
}

我在你的 fiddle 中测试过它，看起来不错! http://jsfiddle.net/WtrfL/1/