2

我有一个我不太了解的交互。我正在构建一个进度条（说真的，我们可以实现整个 标准吗？）根据 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;
}

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

显示外栏、内栏、左上角浮动 1 的框和右侧浮动外栏下方 2 的框的图表

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

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

那么这是什么一回事？有任何想法吗？我很擅长 hack，这只是目前的原型。

4

1 回答 1

1

我从不在伪元素上使用浮点数。我会绝对定位它们。像这样的东西：

.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;
}

我在你的小提琴中测试过，看起来不错！http://jsfiddle.net/WtrfL/1/

于 2013-06-07T20:18:42.923 回答