2

独自のプログレスバーを作成しましたが、いくつか問題が発生しました

width=90% の完全な .box があります

そのボックスには、幅= 100の.progress divがあります

.progress div で、.left-free div 10%、.progressbar 80%、.right-free 100% を得ました

.progressbar には、.grey 30%、.violet 30%、.brown 30%、.blank 0% の 4 つの div があります。

問題は、.grey、.violet、.brown が同じサイズでない理由がわからないことです!

編集：（.blank divは単なるスペーサーです..すべて問題ありません。）

マージンやパディング、または境界線は使用しません。.progressbar の周りの境界線は box-shadow で実現しました。

私のhtmlコード:

<div id="box">

    <div id="progress">

        <div class="left-free">10% free</div>

        <div class="progressbar">
            <div class="grey" style="width:30%">30%</div>
            <div class="violet" style="width:30%">30%</div>
            <div class="brown" style="width:30%">30%</div>
            <div class="blank" style="width:0%">0%</div>
        </div>

        <div class="right-free">10% free</div>

    </div>

</div>

私のCSSコード:

body
    {
        width:100%;
        background-color:#eee;
        padding:0;
        margin:0 auto;
    }
#box
    {
        width:90%;
        padding:0;
        margin:2% auto;
        background-color:#eee;
    }
#progress
    {
        width:100%;
        padding:0;
        margin-bottom:10%;
    }    
.left-free
    {          
        width:10%;
        float:left;
        box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 1);         /* right */
    }
.progressbar
        {
            position:relative;
            width:80%;
            float:left;
            background-color:#ffffff;
            box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 1),         /* top */
                        inset 0px -1px 0px rgba(0, 0, 0, 1);         /* bottom */
        }
.grey {background-color:grey;}
.violet  {background-color:violet;}
.brown  {background-color:brown;}
.blank {background-color:#ffffff;}

.grey,
.violet,
.brown,
.blank
    {
        height:100px;                                            
        float:left;
        margin-top:1px;
    }

.left-free,
.progressbar,
.right-free
    {
        height:102px;                                           
    }
.right-free
    {
        width:10%;
        float:left;
        box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 1);         /* border left */
        text-align:right;
    }

スクリーンショットを作成し、3 つのボックスすべてに同じ幅の緑色のバーを配置しました。.violet と .brown div では、右端にスペーサーがあります (画像で確認できることを願っています)

問題

これは見やすいように切り取ったものです

切り取った

jsfiddleで実行中のコードを確認できます

2 番目の例: jsfiddle 2

ボックスのサイズが同じでない理由はありますか?

編集：htmlをpastebinにアップロードしました

4

1 に答える 1

0

灰色と茶色の幅を 30.1% に変更するか、単に境界プログレスバーを削除します

于 2012-12-01T00:30:01.737 に答える