0

我试图让我的条在文本之后对齐。它们使用 css 绘制并使用 jQuery 进行动画处理。当我使用 div 类“meter orange”并使用 span 样式的宽度设置进度条的大小时，会触发 span。

<div class="meter orange">HTML
<span style="width: 65.3%"></span>
</div>

有什么建议么？

截屏：

截图链接

CSS： 

    #progress-bars-page-wrap { 
    width: 490px; 
    margin: 80px auto; 
    }

    .meter { 
        height: 8px;  /* Can be anything */
        position: relative;
        padding: 3px;

    }
    .meter > span {
        height: 100%;
        background-color: rgb(43,194,83);

    }

    .orange > span {
        background-color: #e94939;

    }

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>

    <link rel="stylesheet" type="text/css" href="bars.css">


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
    $(function() {
        $(".meter > span").each(function() {
            $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
                }, 900);
        });
    });
</script>


</head>

<body>

<div id="progress-bars-page-wrap">

    <div class="meter orange">Javascript<span style="width: 33.3%"></span>
    </div>
    <div class="meter orange">HTML
        <span style="width: 65.3%"></span>
    </div>
    <div class="meter orange">CSS
        <span style="width: 70.3%"></span>
    </div>
    <div class="meter orange">Java
        <span style="width: 60%"></span>
    </div>
    <div class="meter orange">Python
        <span style="width: 84%"></span>
    </div>
    <div class="meter orange">.Net
        <span style="width: 32%"></span>
    </div>
    <div class="meter orange">Ajax
        <span style="width: 60%"></span>
    </div>
</div>

</body>

</html>
4

3 回答 3

1

这通常通过为左侧元素设置宽度来完成。您可以通过设置来设置内联元素（）的width和。height<span>display:inline-block

jsFiddle

CSS

.meter .label {
    display:inline-block;
    width:4em;
}
.meter .bar {
    height: 100%;
    display:inline-block;
    background-color: rgb(43, 194, 83);
}

HTML

<div class="meter orange nostripes">
    <span class="label">Javascript</span>  
    <span class="bar" style="width: 33.3%"></span>
</div>

警告

但是，如果您想在 width:100% 处设置样式，则此方法将遇到问题，因为左侧<span>占用了空间，因此该栏将包装到下一行。我们可以通过使用position:absoluteon.label并给出与 相同大小的.bara来解决这个问题。margin-left.label

jsFiddle（CSS 栏是width:100%）

.meter .label {
    position:absolute;
}
.meter .bar {
    margin-left:4em;
}
于 2013-03-29T02:56:28.063 回答
0

将<span>s 放在编程语言周围，并将它们的固定宽度设置为相同的像素数。这样，每种编程语言将占用相同数量的空间，这将导致条形图从每行的同一点开始。

CSS：

.programmingLang {width: 100px; }

HTML：

<div class="meter orange">Javascript<span style="width: 33.3%"></span>
    </div>
    <div class="meter orange"><span class="programmingLang">HTML</span>
        <span style="width: 65.3%"></span>
    </div>
    <div class="meter orange"><span class="programmingLang">CSS</span>
        <span style="width: 70.3%"></span>
    </div>
于 2013-03-29T02:55:47.230 回答
0

如果您无法更改 HTML，我很确定您可以添加以下内容：

.meter span {
  position: absolute;
  left: 50px; /* adjust to fit label length */
}
于 2013-03-29T21:33:11.853 回答