0

我正在寻找以编程方式生成的进度条。我充其量是一个CSS新手。这是我到目前为止所拥有的；使用这个问题的提示。

理想情况下，我会设置以下简单 HTML 的样式，但我愿意添加更多标签：

<div id="container">
<h2><span>Goal</span></h2>
<div id="bgblock"></div>
    <h2><span>So Far</span></h2>
</div>

两个，也许是 3 个问题：

  • 现在，“行上的文本”是通过在行的顶部将文本设置为白色来完成的。这最终切入绿色背景。为了避免这种情况，我想我需要在它的两边都有文本（没有背景颜色）和线条？
  • 显然我的格式/边距/偏移量是一团糟，框边框/ hr对齐的顶部不太正确（似乎顶部文本需要向上移动几个像素或容器向下移动几个像素，但我'我在这样做时遇到了麻烦）。

对更清洁的解决方案的想法让我到达我想去的地方？

4

1 回答 1

1

我为你创造了一个工作小提琴。http://jsfiddle.net/avrahamcool/QpWqd/46/

主要技巧是区分白色背景和h2元素的文本，给每个元素一个不同的z-index. 背景和文本都在边框之上。但绿色背景介于白色和文本之间。

所以这些层是：

  1. 边界
  2. h2标签的白色背景
  3. 绿色背景
  4. 文本

测试： IE10、FF、Chrome

于 2013-09-10T19:49:45.780 回答