Html CSS-防止元素在进度条中换行

我正在设计一个动画进度条，在我的网站上显示收视率。在条形图的末尾，我想在一个圆圈内显示对应于条形图最终进度%的评分编号（10分之一）。我想要一个反应灵敏的设计

我的问题出现在处理高进度时，例如95%。带有额定值的圆圈被发送到下一行。使用进度值（如75%）调整浏览器大小时也是如此。如果值较低，则一切正常。我尝试使用

#ratingnumber

的负

左边距

和

右边距

值，这似乎有点帮助，但仍然难以在进度条上保留评分圈以获得真正高的进度%

我正在寻找CSS的调整，以保持每一个评级案例的进度栏上的评级圈

jsfiddle占95%：

JSFIDLE为50%：

---

将

空白：nowrap

添加到父元素

#progressbar

。然后从子元素中删除

float:left

，并将

display

更改为

inline block

，以便它们尊重父元素上的

空白

属性。在子对象上设置

垂直对齐：top

，以固定垂直对齐

#ratingnumber

元素上的位置也需要更改为：

#ratingnumber {
    position: relative;
    top: -20px;
}

body {
    background-color: #aaa;
    padding: 40px;
}

#progressbar {
    width: 100%;
    height: 20px;
    background-color: white;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 3px;
    border: 3px solid #666666;
    clear: both;
}

#progress {
    background: green;
    height: 20px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress 2s 1 forwards;
    -moz-animation: progress 2s 1 forwards;
    -ms-animation: progress 2s 1 forwards;
    animation: progress 2s 1 forwards;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#ratingnumber{
    border: 4px solid green;
    background: white;
    padding: 10px;
    float: left;
    font-size: 28px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    border-radius: 50%;
    position: relative;
    left: -30px;
    top: -24px;
}

@-webkit-keyframes progress { 
    from { }
    to { width: 95% }
}

@-moz-keyframes progress { 
    from { }
    to { width: 95% }
}

@-ms-keyframes progress { 
    from { }
    to { width: 95% }
}

@keyframes progress { 
    from { }
    to { width: 95% }
}

#progressbar {
    white-space: nowrap;
}
#ratingnumber, #progress {
    display: inline-block;
    vertical-align: top;
}

#ratingnumber {
    position: relative;
    top: -20px;
}