我正在为我的网站创建一个评分栏，我有几个问题 这是 codepen 的链接，所以你可以看到我到目前为止的内容。
我需要的是喜欢（绿色）和不喜欢（红色）有两种不同的颜色。我怎样才能将这两者分开并让他们共享酒吧。有点像 youtube 的评分栏
和第二个问题
我正在使用 Rails（不需要 Rails 专业知识来回答这个问题），所以我的喜欢代码将是<%= @movies.likes.size %>（即：5000）和不喜欢<%= @movies.dislikes.size %>（即：3000），使用如此高的宽度百分比将不起作用。我怎样才能使其比例适合酒吧谢谢
将 .meter-slim 的背景色更改为不喜欢的颜色，并将 .meter-slim .purple 的背景色更改为喜欢的颜色（示例中为绿色）。
您可能还想在这两个地方将该类的名称从紫色更改为其他名称（也许是绿色）。
然后对于百分比（在您的示例中为 85%），使用 100*likes/(likes+dislikes)
编辑： 我想我会根据我们下面的评论添加这个。
就像我提到的，我只尝试过几次 Ruby，那是十年前的事了，所以我的记忆力很弱。
我将所有内容放入其中的想法<%= %>是基于您在问题中的片段。一种更好的方法，我应该立即提出，是为赞成票的百分比创建一个变量（我们称之为 percent_upvotes ），然后"width: <%= @percent_upvotes %>%"在您的视图中使用。
因此，您需要计算该值并将其存储在 percent_upvotes 中。一种方法是在 SQL 语句中提取赞成票的百分比。我不知道你的架构，但它会像......
SELECT (upvotes/votes) AS percent_upvotes FROM your_table
或者在你的 Ruby...
percent_upvotes = (movies.upvotes.size.to_f / movies.votes.size.to_f ) * 100.0
要计算喜欢的比例将是：
100*likes/(likes+dislikes)
至于第一个问题，例如，为什么不能将 .meter-slim 的背景颜色设置为红色？
一些 CSS 框架本身包含 CSS 进度条。
仅举几例：
和一些 CSS 资源：