Question

这是我试图实现这个效果的地方： http://www.smalldot.agency/ccren/goals-page/

作为＆＃34; val＆＃34;条的宽度增加，它应该与'＃34; current＆＃34; text（（与＆＃34相同的文字; val＆＃34;但是颜色不同））。我能够在＆＃34; val＆＃34;之上强制执行＆＃34;当前＆＃34;的副本。元素，但我无法让它在下面休息。

如果我放置＆＃34;当前＆＃34;在＆＃34; val＆＃34;以下的p级div class，来自＆＃34; current＆＃34;显示在进度条的南边，而不是在它下面。

另外，z-index：0;似乎没有做任何事情来解决这个问题。

HTML：

<div class="progdiv" style="width:100%;">
    <p class="current">1,234</p>
    <div class="val" style="width:3%;">1234</div>
</div>

CSS

.val {
  height:100%;
  border-radius:3px;
  line-height: 1.5em;
  font-size: 12pt;
  background: #019BA9!important;
  text-align: left!important;
  vertical-align: center;
  -webkit-box-shadow: 3px 3px 2px #bbbbbb;
  overflow:hidden;
}

.progdiv {
  background-color: #FFFFFF!important;
  height: 1.5em;
  text-align: right;
  vertical-align: center;
  border: solid 1px #eeeeee;
  border-radius: 3px;
  -webkit-box-shadow: inset 3px 3px 2px #bbbbbb!important;
  text-align: left!important;
  overflow: hidden!important;
}

.current {
  text-indent: 6px;
  height:100%;
  border-radius:3px;
  font-size: 12pt;
  line-height: 1.5em;
  text-align: left!important;
  vertical-align: center;
  color: #019BA9!important;
  position:absolute!important;
  text-align: left!important;
  z-index: 0;
}

Answer 1

只需将position: absolute;添加到.val CSS即可。同时从height:100%和.val CSS中删除.current。

溢出时更改字体颜色

1 个答案: