Question

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

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;

}

Answer 1

您需要确保容器足够宽以容纳内部的两个子元素，或者您可以使用white-space:nowrap。
将两个子元素都设为display:inline-block，请参阅下面的演示。

#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>

Answer 2

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

https://jsfiddle.net/b69ep74e/

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

Answer 3

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

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

https://jsfiddle.net/2qn9eecr/

Answer 4

这是因为#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>

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

4 个答案: