如何在进度条中插入技能名称？

Question

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

这是网络：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;   
}

Answer 1

我建议更改标记。使用列表比divs / span更清晰。

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>

Answer 2

嗨，如果你想要

，可以尝试这种方式

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

工作demo希望这对你有帮助.....

Answer 3

您可以使用position:absolute将文字放在进度条的顶部。然后使用line-height:25px在文本栏中垂直居中。我还建议你给一个课程吧，而不是仅仅将其定位为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;
}