Question

如何添加text before和after进度条。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-git.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="show">60% Complete</span>
  </div>
</div>           
</body>
</html>

以下是我正在研究的jsbin。 http://jsbin.com/IBOwEPog/219/edit

Answer 1

试

$('.progress-bar').before("Text Before").after("Text After");

Answer 2

如果您使用jQuery很酷，可以使用prepend和append方法。

 $('.progress').append("Text Before").prepend("Text After");

Answer 3

可能对此有错误的想法但是这使得2个文本范围出现在进度条的两侧。

两个跨度现在都在进度div之外。

进度条上的

margin-left为左侧文本提供空间

希望这有帮助

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-git.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<span id="analysis_volume" class="show">Analysis Volume</span>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    </div>
    <span id="usage" class="show">&nbsp;60% Complete</span>
</div>



</body>
</html>

/**
 * Progress bars with centered text
 */

.progress {
  position: relative;
  margin-left:110px;
}

#analysis_volume {
    position: absolute;
    display: block;
    text-align:left;
    width: 100%;
    color: black;
}

在进度条之前和之后附加文本

3 个答案: