html - 修复跨度的 HTML 问题

Question

在我的页面中有一个部分，我正在显示星星，例如：

* * * * * * * *

最后我想写出像 7/10 这样的直线评级。

我尝试了很多事情，但无法解决。我试过float:left了float:right。

在链接 http://ripemovies.com/released/2013/best-action-movies

导致问题的代码：

<span class="stars" style="margin-left:250px;margin-top:10px;">
   <span style="width: 128px;"></span>
</span>

Answer 1

您可以将元素浮动在它自己的专用评级容器中

演示http://jsfiddle.net/kevinPHPkevin/AZ9zt/

.rating img {
    width:50px;
    float: left;
}
.rating p { 
  line-height: 45px;   
}

Answer 2

您目前无法将事物标记到星号的末尾，因为它们的样式为block. 将星号更改为inline-block，然后将您的评分标记到末尾作为跨度。

inline-block仍将允许您执行使星星工作所需的块样式，同时让下一个元素（您的文本评级）继续在同一行上。

这是一个 jsfiddle 示例：http: //jsfiddle.net/XrCjq/2/

Answer 3

您似乎在混合元素类型。span是“内联”元素，如文本，而margin用于“块”元素，如div.

您正在尝试实现这样的目标吗？您可以<img style="display: block;">在此处放置星号而不是 div 并设置正确的垂直对齐方式。

<div style="clear: both;">content</div>
<div style="background: black; height: 30px; width: 30px; display: block; float: left; margin: 1px;"></div>
<div style="background: black; height: 30px; width: 30px; display: block; float: left; margin: 1px;"></div>
<div style="background: black; height: 30px; width: 30px; display: block; float: left; margin: 1px;"></div>
<div style="background: black; height: 30px; width: 30px; display: block; float: left; margin: 1px;"></div>
<div style="background: black; height: 30px; width: 30px; display: block; float: left; margin: 1px;"></div>
<div style="display: block; float: left; margin: 1px; height: 30px;">5/10</div>
<div style="clear: both;">content</div>

演示：http: //jsfiddle.net/zP49p/