2

我创建了自己的进度条并遇到了一些问题

我有一个完整的.box，宽度=90%

在那个盒子里我有宽度= 100的.progress div

在 .progress div 中，我得到了 .left-free div 10%、.progressbar 80%、.right-free 100%

在 .progressbar 我有 4 个 div .grey 30%、.violet 30%、.brown 30%、.blank 0%

问题是不知道为什么.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上看到运行代码

第二个例子：jsfiddle 2

有什么想法为什么盒子的尺寸不一样？

编辑：我将 html 上传到pastebin

4

1 回答 1

0

将灰色和棕色宽度更改为 30.1% 或仅删除边框进度条

于 2012-12-01T00:30:01.737 回答