0

テキストの後にバーを一直線に並べようとしています。それらは css を使用して描画され、jQuery でアニメーション化されます。スパンは、div クラス「メーター オレンジ」を使用し、スパン スタイルの幅を使用してプログレス バーのサイズを設定するとトリガーされます。

<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

これは通常、左側の要素に幅を設定することによって行われます。を設定することで、インライン要素（）のwidthandを設定できます。height<span>display:inline-block

jsフィドル

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

プログラミング言語を s で囲み<span>、固定幅を同じピクセル数に設定します。そうすれば、各プログラミング言語が同じ量のスペースを占有するため、バーは各行の同じポイントから始まります。

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 に答える