Question

我正在设计动画进度条以在我的网站上显示评分。在栏的末尾，我想在圆圈内显示对应于栏的最终进度％的评级号（满分10）。我希望有一个响应式设计。

在处理高进度％时出现问题，例如95％。具有评级值的圆圈将向下发送到下一行。在使用诸如75％的进度值调整浏览器大小时也是如此。价值较低，一切都很好。我尝试使用margin-left的负margin-right和#ratingnumber值，这似乎有点帮助，但仍然无法在进度条上保持评级圈以获得非常高的进度％。

我正在寻找CSS调整，以便在每个评级案例的进度条上保留评级圈。

jsfiddle for 95％：http://jsfiddle.net/4pzm98b0

jsfiddle for 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以便修复垂直对齐。

Updated Example

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

#ratingnumber元素上的定位也需要更改为：

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

CSS - 防止元素包含在进度条中

1 个答案: