CSS-防止元素包裝在進度欄中

Question

我正在設計一個動畫進度條，以在我的網站上顯示評分。 在小節的末尾，我想在圓圈內顯示與小節的最終進度百分比相對應的等級編號（滿分10）。 我想要一個響應式設計。

當處理較高的進度百分比（例如95％）時，會出現我的問題。 具有額定值的圓向下發送到下一行。 使用諸如75％之類的進度值調整瀏覽器大小時也是如此。 使用較低的值，一切都很好。 我嘗試使用#ratingnumber負的margin-left和margin-right值為#ratingnumber ，這似乎有所幫助，但仍然很難將進度圈保持在進度條上，以獲取非常高的進度％。

我正在尋找CSS調整項，以使每個評價案例的進度欄中都保留有評價圓圈。

jsfiddle占95％： http ： //jsfiddle.net/4pzm98b0

jsfiddle占50％： http ： //jsfiddle.net/z1wtqebj/

<div id="progressbar">
    <div id="progress"></div>   
    <div id="ratingnumber"> 
        9.5
    </div>
</div>

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% }
}

Answer 1

將white-space: nowrap添加到父元素#progressbar 。 然后從子元素中刪除float: left ，並將display更改為inline-block ，以使它們尊重父元素上的white-space屬性。 設置vertical-align: top在子項vertical-align: top以固定垂直對齊。

更新示例

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

還需要將#ratingnumber元素上的位置更改為：

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