1

我正在处理我的简历，我想要进度条内的技能名称，而不是上方。但我不明白。谢谢

这是网络：http ://working.virgiliodelavega.com/

  <span class="skills-each">Illustrator</span> 
<div class="progress-bar blue"> 
<span style="width: 90%"></span> 
</div>

.skills-title {
    font-size: 1em;
}

.skills-each {
    font-size: .8em;
}

.progress-bar {
    background-color: #727e7f;
    height: 25px;
    padding: 3px;
}

.progress-bar span {
    display: inline-block;
    height: 100%;   
}

.blue span {
    background-color: #34495e;   
}

.red span {
    background-color: #e74c3c;   
}
4

3 回答 3

0

我建议更改标记。使用列表比 divs/spans 干净得多。

http://codepen.io/cimmanon/pen/Hikxp

ul.skills {
  padding: 0;
}

ul.skills li {
  background-color: #727e7f;
  position: relative;
  line-height: 2em;
  margin: 1em 0;
  padding: 0 .5em;
  position: relative;
  color: white;
}

ul.skills li span {
  position: relative;
  z-index: 10;
  font-size: .8em;
}

ul.skills li:after {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  content: '';
}

ul.skills li.seven:after {
  width: 70%;
}

ul.skills li.eight:after {
  width: 80%;
}

ul.skills li.nine:after {
  width: 90%;
}

ul.skills li.ten:after {
  right: 3px;
}

ul.skills.graphic li:after {
    background-color: #34495e;   
}

ul.skills.web li:after {
    background-color: #e74c3c;   
}

<h1>Graphic Skills</h1>

<ul class="skills graphic">
  <li class="eight"><span>Illustrator</span></li> 
  <li class="ten"><span>Photoshop</span></li> 
  <li class="nine"><span>Indesign</span></li> 
</ul>

<h1>Web Development</h1>

<ul class="skills web">
  <li class="seven"><span>Illustrator</span></li> 
  <li class="eight"><span>Photoshop</span></li> 
  <li class="nine"><span>Indesign</span></li> 
</ul>
于 2013-03-30T23:48:37.483 回答
0

hi you can try this way if you want

html

<span class="skillEachWrap"> <span class="skills-each">Illustrator</span></span>
<div class="progress-bar blue"> 
<span style="width: 90%"></span> 
</div>

css

.skillEachWrap {
    float:left;
    position:relative;
}

.skills-each {
    font-size: .8em;
    position:absolute;
    top:7px;
    left:10px;
}

working demo hope this help you.....

于 2013-03-31T08:51:27.163 回答
0

您可以使用position:absolute将文本放在进度条的顶部。然后使用line-height:25px使文本在条内垂直居中。我还建议你给你 bar 一个类，而不是仅仅针对它，span因为我们现在有多个孩子.progress-bar。

jsFiddle

演示

HTML

<div class="progress-bar blue">
    <span class="bar" style="width: 80%"></span>
    <span class="name">Photoshop</span>
</div>

CSS

.progress-bar {
    background-color: #727e7f;
    height: 25px;
    padding: 3px;

    position:relative;
}

.progress-bar .bar {
    display: inline-block;
    height: 100%;
}

.progress-bar.blue .bar {
    background-color: #34495e;
}

.progress-bar .name {
    color:#FFF;
    position:absolute;
    left:10px;
    line-height:25px;
}
于 2013-03-31T08:57:56.727 回答