为什么内容显示在此DIV之外?

时间:2015-04-20 00:15:51

标签: html css

我有一个运行完成进度条的PHP脚本。我想显示栏旁边的百分比...这应该是容易的部分。但由于某种原因,我无法获得显示NEXT到百分比的百分比而不是它。

https://jsfiddle.net/

HTML

<div id="progress_bar_container">
    <div id="progress_bar_background">
        <div id="progress" style="width: <?php echo $progress_bar_width; ?>px;">
            &nbsp;
        </div>
    </div>
    <div style="text-align: left; display: inline-block;">
        <?php echo $completed_lc_percentage . "%"; ?>
    </div>
</div>

CSS

#progress_bar_container {

width: 220px;
height: 20px;

}

#progress_bar_background {

    display: block;
    background-color: #eaeaea;
    width: 200px;
    height: 20px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;

}

#progress {

    display: block;
    background: #a8c25d;
    height: 20px;
    width: 0px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;

}

4 个答案:

答案 0 :(得分:1)

  1. 您需要确保容器足够宽以容纳内部的两个子元素,或者您可以使用white-space:nowrap

  2. 将两个子元素都设为display:inline-block,请参阅下面的演示。

  3. #progress_bar_container {
        width: 220px; /*or increase the value*/
        height: 20px;
        white-space: nowrap; /*added*/
    }
    #progress_bar_background {
        /* display: block; */
        display: inline-block; /*added*/
        background-color: #eaeaea;
        width: 200px;
        height: 20px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -khtml-border-radius: 15px;
        border-radius: 15px;
    }
    #progress {
        display: block;
        background: #a8c25d;
        height: 20px;
        width: 0px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        -khtml-border-radius: 15px;
        border-radius: 15px;
    }
    <div id="progress_bar_container">
        <div id="progress_bar_background">
            <div id="progress">&nbsp;</div>
        </div>
        <div style="text-align: left; display: inline-block;">n%</div>
    </div>

答案 1 :(得分:1)

你需要向左移动progress_bar_background,然后加宽progress_bar_container的宽度,以允许百分比div位于它旁边。以下是这项工作的一个例子:

https://jsfiddle.net/b69ep74e/

您可能希望将进度百分比div按下一个或两个像素以将其排成一行,并且进度div的宽度应为百分比。

答案 2 :(得分:1)

这是因为#progress_bar_background没有display: inline-block#progress_bar_container有固定的width。固定的宽度不会让文本留出空间。

删除#progress_bar_container的宽度或增加它。将display: inline-block添加到#progress_bar_background,它应该可以正常工作。

https://jsfiddle.net/2qn9eecr/

答案 3 :(得分:0)

这是因为#progress_bar_container的容差空间非常小percentage无法放入栏的NEXT空间,您还必须添加float:left;#progress_bar_background css。

#progress_bar_container {

width: 300px;
height: 20px;

}

#progress_bar_background {

    display: block;
    float:left;
    background-color: #eaeaea;
    width: 200px;
    height: 20px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;

}

#progress {

    display: block;
    background: #a8c25d;
    height: 20px;
    width: 0px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;

}
<div id="progress_bar_container">
    <div id="progress_bar_background">
        <div id="progress" style="width: 100px;">
            &nbsp;
        </div>
    </div>
    <div style="text-align: left; display: inline-block;">
        50%
    </div>
</div>