Question

在my page中，有一节显示的是：

* * * * * * * *

最后我想直接写出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

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

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

跨度修复的Html问题

3 个答案: