CSS静态进度条及设置不换行

最终效果图：

image.png

CSS

.progress-bar1{
    width:40%; /*进度条的槽*/
    height: 5px;/*进度条高度*/
    background-color: #080808;/*进度条外层div的背景色，进度未达到的地方的颜色 */
}
.progress1{
    /* 进度部分 */
    /* 利用继承父元素宽度的百分比控制进度 */
    width: 60%;
    height: 100%;
    /* 内层背景色即进度达到的颜色 */
    background-color: #6e4ae4;
}

HTML

<p>Photoshop 
      <div class="progress-bar1">
           <div class="progress1"></div>
      </div>
</p>

效果图

image.png

此时会出现一个问题，文字和进度条不在同一行，因为div是块级元素，会自动换行，但如果把进度条的div改为内联元素span又不能设置宽高，所以解决方法：将<p>和<div>均设为内联块状元素，即加上display:inline-block;
如下：

CSS

p{
   display:inline-block;/*设为内联块状元素*/
}
.progress-bar1{
   display:inline-block;/*设为内联块状元素*/
   width:40%;
   height: 5px;
   background-color: #080808;
}
.progress1{
   width: 60%;
   height: 100%;
   background-color: #6e4ae4;
}

效果图

image.png