我想知道如何组合按钮和进度条以实现stackoverflow站点上下一个徽章按钮附近的内容。以下是我尝试过的内容 Fiddle :
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div style="padding: 30px;">
<div class="progress" style="width:170px; height:25px;">
<a class="progress-bar progress-bar-warning"
role="progressbar"
aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 30%;">
<span class="sr-only">30% Complete</span>
Show
</a>
</div>
位于左侧部分的文本和整个构造不作为按钮(仅文本)。换句话说,如何将第一个转换为另一个?
=&GT;
答案 0 :(得分:1)
查看结果here。
HTML:
<div style="padding: 30px; width: 250px;">
<a href="#here-comes-your-link">
<div class="progress p-style">
<div class="progress-bar pb-style" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:40%"></div>
<span class="show">Fanatic</span>
</div>
</div>
</a>
</div>
CSS:
.pb-style {
background: #FFCC00;
box-shadow: none;
-webkit-box-shadow: none;
}
.p-style {
height: 25px;
border: 1px solid #FFCC00;
position: relative;
}
.progress span {
position: absolute;
display: block;
font-size: 11px;
color: #222;
width: 100%;
text-align: center;
line-height: 25px;
}