css - 同一行的 CSS 评分栏

Question

我正在创建一个评分栏，我目前有这个代码

<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 的栏一样。

谢谢

Answer 1

您需要给它们一个display:inline-block，这可以让您设置它们的宽度和高度。有关更多详细信息，请参阅什么是内联块。

此外，如果您想消除元素之间的空间，请参阅消除内联块元素之间的空间。就我个人而言，我喜欢设置字体大小、弄乱评论或构建标记是讨厌的。

Answer 2

.rating-bar div { float:left; }

并删除 margin-left:20px; 从内联样式也添加 clear:left

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