[英]CSS - Prevent an element from wrapping in a progress bar
I'm designing an animated progress bar to display ratings on my website. 我正在设计一个动画进度条,以在我的网站上显示评分。 At the end of the bar, I want to display inside a circle the rating number (out of 10) corresponding to the final progress % of the bar.
在小节的末尾,我想在圆圈内显示与小节的最终进度百分比相对应的等级编号(满分10)。 I want to have a responsive design.
我想要一个响应式设计。
My problem arises when dealing with a high progress %, such as 95%. 当处理较高的进度百分比(例如95%)时,会出现我的问题。 The circle with the rating value is sent down to the next line.
具有额定值的圆向下发送到下一行。 It is also the case when resizing my browser with a progress value such as 75%.
使用诸如75%之类的进度值调整浏览器大小时也是如此。 With lower values, everything is fine.
使用较低的值,一切都很好。 I tried to play around with negative
margin-left
and margin-right
values for #ratingnumber
, which seems to help a bit but still had trouble keeping the rating circle on the progress bar for really high progress %. 我尝试使用
#ratingnumber
负的margin-left
和margin-right
值为#ratingnumber
,这似乎有所帮助,但仍然很难将进度圈保持在进度条上,以获取非常高的进度%。
I'm looking for the CSS tweak to keep the rating circle on the progress bar for every rating cases. 我正在寻找CSS调整项,以使每个评价案例的进度栏中都保留有评价圆圈。
jsfiddle for 95%: http://jsfiddle.net/4pzm98b0 jsfiddle占95%: http : //jsfiddle.net/4pzm98b0
jsfiddle for 50%: http://jsfiddle.net/z1wtqebj/ 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% }
}
Add white-space: nowrap
to the parent element, #progressbar
. 将
white-space: nowrap
添加到父元素#progressbar
。 Then remove float: left
from the children elements, and change the display
to inline-block
in order for them to respect the white-space
property on the parent. 然后从子元素中删除
float: left
,并将display
更改为inline-block
,以使它们尊重父元素上的white-space
属性。 Set vertical-align: top
on the children in order to fix the vertical alignment. 设置
vertical-align: top
在子项vertical-align: top
以固定垂直对齐。
#progressbar {
white-space: nowrap;
}
#ratingnumber, #progress {
display: inline-block;
vertical-align: top;
}
The positioning on the #ratingnumber
element also needs to be changed to: 还需要将
#ratingnumber
元素上的位置更改为:
#ratingnumber {
position: relative;
top: -20px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.