2013-09-01 19 views
0

my page有我在哪裏顯示星辰般節:與跨度的Html問題被固定

* * * * * * * * 

而在我想寫的評價一樣7/10在直線的終點。

我嘗試了很多東西,但無法解決它。我試過float:leftfloat: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> 
+0

哪裏是這個跨度? – Itay

+0

更新問題 –

+0

請注意,爲您的問題提供一個完整的,小型的工作示例(包括CSS和HTML)真的很有幫助,因此人們可以在不挖掘整體的情況下處理問題的細節代碼到您的網站。在像jsfiddle.net這樣的小測試環境中重現您的問題會非常有幫助。 –

回答

0

你可以「因爲它們的樣式爲block,因此現在將標記標記到星星的盡頭。將星星更改爲inline-block,然後僅將您的評分標記爲跨度。

inline-block仍然允許您執行讓星星工作所需的模塊樣式,同時讓下一個元素(文本等級)繼續保持同一行。

這裏有一個例子的jsfiddle:http://jsfiddle.net/XrCjq/2/

0

你似乎是混合元素類型。 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/