Question

我几乎烧坏了这个问题的原因。

我想要显示进度条，如下图

我标记如下，但失败了......

<div class="container" style="position:relative;">
    <div class="progress-bar" style="position:absolute; width:75%; background:green;"></div>
    <div class="value" style="position:absolut; left:0; margin:0 auto; color:yellow;">75%</div> => center of parent div
</div>

我如何获得漂亮的进步吧？

请捐出你的知识。

感谢。

Answer 1

检查link 对于bootstrap进度条，它们与你所追求的相匹配。

您需要在项目中使用bootstrap，有两种方法可以获得Bootstrap。您可以从此link下载Bootstrap，或使用此link

从CDN中包含Bootstrap

使用最新版本的Bootstrap（v3），您可以包含以下从the documentation获取的代码，该代码为您提供带标签的进度条。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        60%
      </div>
    </div>

Answer 2

首先，您的代码包含拼写错误。检查班级value的样式。也许这段代码可以给你一些想法：

＆＃13;

<div class="container" style="position:relative; width:100px; background:#fff; height:20px; border: solid 1px #000">
    <div class="progress-bar" style="position:absolute; width:75%; height:20px; background:green;"></div>
    <div class="value" style="position:absolute; left:0; margin:0 auto; color:yellow; text-align:center; width:100%;">75%</div>
</div>

＆＃13;

如果您希望容器为圆角矩形，请使用border-radius。

此外，将所有css放入外部文件或<style>标记内可能是个好主意。

如何在父div中叠加多个子div？

2 个答案: