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

マークアップの変更をお勧めします。リストの使用は、div/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>
于 2013-03-30T23:48:37.483 に答える
0

こんにちは、必要に応じてこの方法を試すことができます

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

動作デモこれがお役に立てば幸いです.....

于 2013-03-31T08:51:27.163 に答える