CSS评级栏在同一行

我正在创建一个评级栏，我现在有这个代码

<div class="rating-bar">
    <div style="background-color:#00ff00;height:30px;width:4%; margin-left:20px;"></div>
    <div style="background-color:#ff0000;height:30px;width:2%; margin-left:20px;"></div>
</div>

我的问题是

#00FF00

显示在一行上，而

#ff0000

显示在另一行上。 我怎样才能让它们并排，所以左边的

#00ff00

和右边的

#ff0000

，不管宽度如何，就像youtube的酒吧一样

---

谢谢

您需要给它们一个

显示：内联块

，这可以让您设置它们的宽度和高度。有关更多详细信息，请参阅

此外，如果要消除元素之间的空间，请参见。就我个人而言，我喜欢设置字体大小，胡乱处理注释或构建标记是令人讨厌的

.rating-bar div { float:left; }

并去掉左边的边距：20px；从内联样式中还添加“清除：左”

<div class="rating-bar">
    <div style="background-color:#00ff00;height:30px;width:4%;"></div>
    <div style="background-color:#ff0000;height:30px;width:2%; "></div>
    <div style="clear:left;"></div>
</div>

请不要使用内联样式。。。。老实说，大多数人只是跳过了使用内联样式的问题，因为它更难理解..评级条div{float:left；}我已经尝试过了，但是颜色之间仍然有一个空间，是的，因为边距。。。现在应该可以了吧？这很有效，请将其列为答案